title: CSS Animation Fill Mode - What have I done wrong?
body: <p>I need to create a rotation animation. A click event spins an element 180° to point down. Another click event spins the same element back to 0° to point up.</p>
  
  <p>I have <code>animation-fill-mode</code> to set to <code>forwards</code> to preserve the last keyframe state. But it does not appear to be working. All visual elements reset to the default state.</p>
  
  <p>Any ideas what I may be doing wrong?</p>
  
  <p><strong>My Codepen</strong>: <a href="http://codepen.io/simspace-dev/pen/RrpGmP" rel="nofollow">http://codepen.io/simspace-dev/pen/RrpGmP</a></p>
  
  <p><strong>My code</strong>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function() {
    $('#btnb').on('click', function(e) {
      return $('.box').addClass('spin-counter-clockwise');
    });
    $('#btnf').on('click', function(e) {
      return $('.box').addClass('spin-clockwise');
    });
    $('.box').on('webkitAnimationEnd', function(e) {
      return $(e.target).removeClass('spin-counter-clockwise').removeClass('spin-clockwise');
    });
  }.call(this));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.box {
    background: red;
    position: relative;
    width: 176px;
    height: 176px;
    margin: 40px auto;
    text-align: center;
  }
  .box .top {
    background: green;
    position: absolute;
    top: 0;
    width: 100%;
    height: 28px;
  }
  .box .bottom {
    background: purple;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 28px;
  }
  .box .caret {
    color: white;
    font-size: 88px;
    position: absolute;
    top: 42px;
    left: 50px;
  }
  .spin-clockwise {
    -moz-animation: spin 2s;
    -webkit-animation: spin 2s;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
  }
  .spin-counter-clockwise {
    -moz-animation: spin 2s reverse;
    -webkit-animation: spin 2s reverse;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
  }
  @keyframes spin {
    from {
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
    }
    to {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  body {
    text-align: center;
    margin: 0 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;h2&gt;Keyframes are not supported in IE9 and earlier&lt;/h2&gt;
  
  &lt;div class="box"&gt;
    &lt;div class="top"&gt;top&lt;/div&gt;
    &lt;div class="caret"&gt;&lt;i class="fa fa-caret-square-o-up"&gt;&lt;/i&gt;
    &lt;/div&gt;
    &lt;div class="bottom"&gt;bottom&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;p&gt;
    &lt;button id="btnf"&gt;SPIN CLOCKWISE&lt;/button&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;button id="btnb"&gt;SPIN COUTNER CLOCKWISE&lt;/button&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>