Animazioni fotogrammi chiave CSS3: termina e resta sull'ultimo fotogramma

Question

Ho incontrato qualche difficoltà nel provare a riprodurre un'animazione di fotogrammi chiave CSS3 e l'elemento pertinente rimane nell'ultimo fotogramma al termine dell'animazione. Per quanto ne so, la proprietà che devo impostare affinché funzioni, dovrebbe essere in modalità animazione-riempimento, che dovrebbe avere il valore di forward; questo non fa nulla

.animatedSprite { 
    .animation-name: sprite; 
    .animation-duration: .5s; 
    .animation-iteration-count: 1; 
    .animation-direction: normal; 
    .animation-timing-function: steps(3); 
    .animation-fill-mode: forwards; 
    //Vendor prefixes... } 

Questo riprodurrà solo l'animazione una volta e quindi tornerà al primo fotogramma. Ho trovato un esempio di animazioni di fotogrammi chiave su JSFiddle (http://jsfiddle.net/simurai/CGmCe/), e la modifica della modalità di riempimento in avanti e l'impostazione del conteggio di iterazione su 1 non avrebbe comportato nulla lì.

Qualsiasi aiuto sarebbe molto apprezzato.

Answer 1

animation-fill-mode:forwards è la proprietà corretto da utilizzare. È non sembrano a lavorare perché lo sfondo dell'immagine sprite ha un valore predefinito background-repeat:repeat, in modo che il telaio ultima pensate che state vedendo è in realtà il telaio prima dell'immagine di sfondo ripetuta.

Se si imposta

background: url("http://files.simurai.com/misc/sprite.png") no-repeat 

animation: play .8s steps(10) forwards; 

@keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

ed eseguire la demo il fotogramma finale è ora vuota - così forwards sta facendo quello che dovrebbe fare. La seconda parte della soluzione consiste nel modificare le proprietà finali to e steps CSS per posizionare correttamente lo sfondo. Quindi abbiamo davvero bisogno dello sfondo per fermarci allo -450px e utilizzare i passi 9.

-webkit-animation: play .8s steps(9) forwards; 

@keyframes play { 
    from { background-position: 0; } 
    to { background-position: -450px; } 
} 

See demo - Ho risolto solo le proprietà di Chrome. Anche qui è l'immagine di esempio nel caso in cui l'originale scompaia.

.hi { 
 
    width: 50px; 
 
    height: 72px; 
 
    background: url("http://i.stack.imgur.com/ilKfd.png") no-repeat; 
 
    
 
    -webkit-animation: play .8s steps(9) forwards; 
 
     -moz-animation: play .8s steps(10) infinite; 
 
     -ms-animation: play .8s steps(10) infinite; 
 
     -o-animation: play .8s steps(10) infinite; 
 
      animation: play .8s steps(9) forwards; 
 
} 
 

 
@-webkit-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -450px; } 
 
} 
 

 
@-moz-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
} 
 

 
@-ms-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
} 
 

 
@-o-keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -500px; } 
 
} 
 

 
@keyframes play { 
 
    from { background-position: 0px; } 
 
    to { background-position: -450px; } 
 
}

<div class="hi"></div>

Answer 2

Change 'infinita' a '1' nel css, questo risolve il problema per me

Answer 3

Il seguente codice renderà il soggiorno di transizione sull'ultimo fotogramma:

-webkit-timing-function:ease; 
-webkit-iteration-count:1;