Impossibile arrestare l'animazione css che scompare dopo l'ultimo fotogramma chiave

Question

Ho una semplice animazione css che mi piacerebbe riprodurre e poi mi fermo sull'ultimo fotogramma che visualizza completamente l'immagine. Ma attualmente, al momento gioca poi sembra di tornare per inquadrare uno così le santas faccia scompare.

Come posso far funzionare la riproduzione attraverso una volta poi si ferma sull'ultimo fotogramma chiave o visualizzare l'immagine senza dissolvenza di nuovo?

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

È necessario animation-fill-mode: forwards per evitare che ciò accada.

Inoltre, è necessario terminare con un'opacità di 1, quindi l'ultimo fotogramma deve avere un'opacità del 1.

jsFiddle example - funziona come previsto ora.

È inoltre possibile abbreviare il fotogramma chiave rimuovendo 0%, poiché questo è già indicato nello stato iniziale.

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

Si potrebbe anche combinare 96% e 100%.

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

Dal momento che si utilizzano più proprietà di animazione, utilizzare il animation shorthand:

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

Che sarebbe:

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

Nella demo, ho aggiunto i prefissi vendor per -moz/-webkit. Oltre a questi dovresti averne uno scritto senza prefisso. Lo stesso vale per i keyframe.