title: Can't stop css animation disappearing after last key frame
body: <p>I've got a simple css animation that I'd like to play and then stop on the last frame fully displaying the image. But currently at the moment it plays then seems to revert back to frame one so the santas face disappears.</p>
  
  <p>How can i make it play through once then stop on the last key frame or display the image without it fading out again?</p>
  
  <p><a href="http://jsfiddle.net/uy25Y/">http://jsfiddle.net/uy25Y/</a> </p>
  
  <pre><code>    &lt;img class="santaface" src="http://imgs.tuts.dragoart.com/how-to-draw-a-santa-face_1_000000001282_3.jpg"&gt;
  
       .santaface{
            opacity:0;
            position: absolute;
            left:40%; top:20%; width:20%;
              -webkit-animation-name: santaappear;
              -webkit-animation-duration: 13s;
              }
  
  
          .santaface{-webkit-animation-delay:2s;animation-delay:2s;}
  
          @-webkit-keyframes santaappear {
              0% { opacity:0;}
                 96% {opacity:1;}
          }
  </code></pre>