У меня есть простая анимация CSS, которую я хотел бы воспроизвести, а затем остановиться на последнем кадре, полностью отображающем изображение. Но в настоящее время, когда он воспроизводится, кажется, что он возвращается к первому кадру, поэтому лицо Санты исчезает.

Как сделать так, чтобы он воспроизводился один раз, а затем останавливался на последнем ключевом кадре или отображал изображение, не исчезая снова?

http://jsfiddle.net/uy25Y/

    <img class="santaface" src="http://imgs.tuts.dragoart.com/how-to-draw-a-santa-face_1_000000001282_3.jpg">

     .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;}
        }