title: CSS rotate animation
body: <p>I'm trying to get this animation to hold it's final state/last frame using css.</p>
  
  <p><code>animation-fill-mode: forwards;</code> is not working. Is there anyway I can get it to stop returning to beginning position? </p>
  
  <p><a href="http://jsfiddle.net/missile20706/jgvkjzqb/" rel="nofollow">jsFiddle with broken animation</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.rotate{
  
    animation: animationFrames ease 4s;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    animation-fill-mode:forwards; /*when the spec is finished*/
    -webkit-animation: animationFrames ease 4s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform-origin: 50% 50%;
    -webkit-animation-fill-mode:forwards/*Chrome 16+, Safari 4+*/ 
  }
  
  @keyframes animationFrames{
    0% {
      transform:  translate(0px,0px)  rotate(0deg) ;
    }
    100% {
      transform:  translate(0px,-10px)  rotate(-45deg) ;
    }
  }
  
  @-moz-keyframes animationFrames{
    0% {
      -moz-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    100% {
      -moz-transform:  translate(0px,-10px)  rotate(-45deg) ;
    }
  }
  
  @-webkit-keyframes animationFrames {
    0% {
      -webkit-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    100% {
      -webkit-transform:  translate(0px,-10px)  rotate(-45deg) ;
    }
  }
  
  @-o-keyframes animationFrames {
    0% {
      -o-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    100% {
      -o-transform:  translate(0px,-10px)  rotate(-45deg) ;
    }
  }
  
  @-ms-keyframes animationFrames {
    0% {
      -ms-transform:  translate(0px,0px)  rotate(0deg) ;
    }
    100% {
      -ms-transform:  translate(0px,-10px)  rotate(-45deg) ;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div&gt; &lt;span class="rotate"&gt;G&lt;/span&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>