title: Using Javascript to alter specific section of css animation
body: <p>I'm trying to use javascript to alter the 50% section of this css..</p>
  
  <pre><code>@keyframes shake1 {
  0% { transform: translate(0px); visibility: hidden; }
  1% { visibility: visible;}
  50% { transform: translate(0.7px);}
  100% { transform: translate(0px); }
  }
  </code></pre>
  
  <p>.. using something like this (sorry this is a complete guess of what it might look like)..</p>
  
  <pre><code>document.getElementById('@keyframes shake1').style.50%  = "0.6"px;
  </code></pre>
  
  <p>.. to be able to change the translate to different values (0, 0.1, 0.2 etc) in response to what time it is, like this, for example..</p>
  
  <pre><code>&lt;script&gt;
  
  var currentTime = new Date().getHours();
  
  if (0 &lt;= currentTime &amp;&amp; currentTime &lt; 12) 
  {
  document.getElementById('@keyframes shake1').style.50%  = "0.1"px;
  }
  
  else if (12 &lt;= currentTime &amp;&amp; currentTime &lt; 24) 
  {
  document.getElementById('@keyframes shake1').style.50%  = "0.4"px;
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Just looking for the specific javascript phrase to target that specific section of the css animation?</p>
  
  <p>Thanks !</p>