title: How to move to the certain keyframe in CSS3 animation?
body: <p>Let's say we have an animation like here: <a href="http://jsfiddle.net/utterstep/JPDwC/" rel="noreferrer">http://jsfiddle.net/utterstep/JPDwC/</a></p>
  
  <p>Layout:</p>
  
  <pre><code>&lt;div&gt;back&lt;/div&gt;
  &lt;div class="animating"&gt;&lt;/div&gt;
  &lt;div&gt;forward&lt;/div&gt;
  </code></pre>
  
  <p>And corresponding CSS:</p>
  
  <pre><code>@keyframes someanimation {
      0% {
          width: 100px;
      }
      50% {
          width: 200px;
      }
      100% {
          width: 100px;
      }
  }
  
  .animating {
      width: 200px;
      height: 200px;
      background-color: red;
      animation: someanimation 5s infinite;
  }
  </code></pre>
  
  <p>And I want to go to the next or previous animation state when I press <em>back</em> or <em>forward</em>. There can be more than one object and I would like to switch their animation states at the same time.</p>
  
  <p>Is it someway possible via CSS or CSS+JS, or it maybe it will be easier for me just to rewrite my code in pure-JS? (currently I don't like this idea because I have a lot of properties to animate and CSS makes it much more easier for me)</p>