title: CSS Keyframes animation disappearing after complete
body: <p>My animation keeps disappearing after it completes its animation. I have followed the answers to other questions but it still doesn't help. My CSS is as follows:</p>
  <pre class="lang-css prettyprint-override"><code>.upvote-object {
      width: 50px;
      height: 62.5px;
      background: url('/icons/upvote.png') left center no-repeat;
      background-size: 50px 62.5px;
  
      &amp;.upvoted {
          background: url('/icons/upvoted.png') left center no-repeat;
          background-size: 50px 62.5px !important;
      }
  }
  .ani-upvote {
      background: url('/icons/upvote-sprite.png') left center no-repeat;
      background-size: 1700px 62.5px;
  
      animation: play 3s steps(34);
      animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
      opacity: 1;
  }
  
  @keyframes play {
      100% {
          background-position: -1700px;
          opacity: 1;
      }
  }
  @-webkit-keyframes play {
      100% {
          background-position: -1700px;
          opacity: 1;
      }
  }
  </code></pre>
  <p>I am calling it in my HTML like this:</p>
  <pre><code>&lt;div class=&quot;upvote-object ani-upvote&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>Here's the problem: <a href="http://jsfiddle.net/Joshie/24ab3a9u/" rel="nofollow noreferrer">JSFiddle</a></p>
  <p><strong>UPDATE:</strong> Please also know that the animation must also stay on the last frame! (Green)</p>