Невозможно остановить анимацию css, исчезающую после последнего ключевого кадра

Question

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

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

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

Answer 1

Вам нужно animation-fill-mode: forwards, чтобы предотвратить это.

Кроме того, вы должны закончить с непрозрачностью 1, поэтому последний кадр должен иметь непрозрачность 1.

jsFiddle example - это работает, как ожидалось в настоящее время.

Вы также можете укоротить свой ключевой кадр, удалив , так как это уже указано в исходном состоянии.

@keyframes santaappear { 
    96% { 
     opacity:1; 
    } 
    100% { 
     opacity:1; 
    } 
} 

Вы также можете комбинировать 96% и 100%.

@keyframes santaappear { 
    96%, 100% { 
     opacity:1; 
    } 
} 

Поскольку вы используете несколько свойств анимации, используйте animation shorthand:

<single-animation-name> || <time> || <timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode>` 

Какой бы:

animation: santaappear 13s 2s forwards; 
-moz-animation: santaappear 13s 2s forwards; 
-webkit-animation: santaappear 13s 2s forwards; 

В демке, я добавил префиксы для -moz/-webkit. В дополнение к этим вы должны написать один без префикса. То же самое касается ключевых кадров.