Sintassi dell'animazione dei fotogrammi chiave - Trucchi CSS

Anonim

Dichiarazione e utilizzo di base

@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )

Per brevità il resto del codice in questa pagina non utilizzerà alcun prefisso, ma l'utilizzo nel mondo reale dovrebbe utilizzare tutti i prefissi del fornitore dall'alto

Più passaggi

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Se un'animazione ha le stesse proprietà di inizio e fine, un modo per farlo è separare con virgole i valori 0% e 100%:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Oppure puoi sempre dire all'animazione di eseguire due volte (o un numero pari di volte) e indicare la direzione a alternate.

Richiamo dell'animazione dei fotogrammi chiave con proprietà separate

.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )

Stenografia di animazione

Basta separare lo spazio da tutti i valori individuali. L'ordine non ha importanza tranne quando si utilizzano sia la durata che il ritardo, devono essere in quell'ordine. Nell'esempio sotto 1s = durata, 2s = ritardo, 3 = iterazioni.

animation: test 1s 2s 3 alternate backwards

Combina trasformazione e animazione

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Animazioni multiple

È possibile separare i valori da virgole per dichiarare più animazioni su un selettore.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Passaggi ()

La funzione steps () controlla esattamente quanti fotogrammi chiave saranno renderizzati nel periodo di tempo dell'animazione. Diciamo che dichiari:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Se utilizzi i passaggi (10) nella tua animazione, si assicurerà che solo 10 fotogrammi chiave si verifichino nel tempo assegnato.

.move ( animation: move 10s steps(10) infinite alternate; )

La matematica funziona bene lì. Ogni secondo, l'elemento si sposterà di 10px a sinistra e 10px in basso, fino alla fine dell'animazione, quindi di nuovo all'inverso per sempre.

Questo può essere ottimo per l'animazione del foglio sprite come questa demo di simurai.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
4 * 5 * 10 12 5.1 *

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4 * 6.0-6.1 *

Più risorse

  • Documenti MDN
  • MDN: utilizzo dell'animazione CSS
  • Posso usare - Supporto browser
  • VIDEO: Introduzione alle animazioni CSS