Animazione - Trucchi CSS

Anonim

L' animationimmobile in CSS può essere utilizzato per animare molte altre proprietà CSS, come color, background-color, height, o width. Ogni animazione deve essere definita con la @keyframesregola at che viene quindi chiamata con la animationproprietà, in questo modo:

.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )

Ogni @keyframesregola definisce cosa dovrebbe accadere in momenti specifici durante l'animazione. Ad esempio, 0% è l'inizio dell'animazione e 100% è la fine. Questi fotogrammi chiave possono quindi essere controllati dalla animationproprietà abbreviazione , o dalle sue otto proprietà secondarie, per fornire un maggiore controllo su come tali fotogrammi chiave devono essere manipolati.

Sottoproprietà

  • animation-name: dichiara il nome della @keyframesregola da manipolare.
  • animation-duration: il tempo necessario a un'animazione per completare un ciclo.
  • animation-timing-function: stabilisce curve di accelerazione preimpostate come easeo linear.
  • animation-delay: il tempo che intercorre tra il caricamento dell'elemento e l'inizio della sequenza di animazione (esempi interessanti).
  • animation-direction: imposta la direzione dell'animazione dopo il ciclo. Il suo valore predefinito si ripristina ad ogni ciclo.
  • animation-iteration-count: il numero di volte in cui l'animazione deve essere eseguita.
  • animation-fill-mode: imposta quali valori vengono applicati prima / dopo l'animazione.
    Ad esempio, puoi impostare l'ultimo stato dell'animazione in modo che rimanga sullo schermo oppure puoi impostarlo per tornare a prima quando l'animazione è iniziata.
  • animation-play-state: mette in pausa / riproduce l'animazione.

Queste proprietà secondarie possono quindi essere utilizzate in questo modo:

@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )

Di seguito è riportato un elenco completo dei valori che ciascuna di queste proprietà secondarie può assumere:

animation-timing-function facilità, facilità in uscita, facilità in ingresso, facilità in uscita, lineare, cubic-bezier (x1, y1, x2, y2) (ad es. cubic-bezier (0,5, 0,2, 0,3, 1,0))
animation-duration Xs o Xms
animation-delay Xs o Xms
animation-iteration-count X
animation-fill-mode avanti, indietro, entrambi, nessuno
animation-direction normale, alternativo
animation-play-state in pausa, correndo, correndo

Più passaggi

Se un'animazione ha le stesse proprietà di inizio e fine, è utile separare con virgole i valori 0% e 100% all'interno @keyframes:

@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )

Animazioni multiple

È possibile separare i valori da virgole per dichiarare anche più animazioni su un selettore. Nell'esempio seguente, vogliamo cambiare il colore del cerchio in un @keyframementre lo spingiamo da un lato all'altro con un altro.

.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )

Prestazione

L'animazione della maggior parte delle proprietà è un problema di prestazioni, quindi è necessario procedere con cautela prima di animare qualsiasi proprietà. Tuttavia, ci sono alcune combinazioni che possono essere animate in sicurezza:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Quali proprietà possono essere animate?

MDN ha un elenco di proprietà CSS che possono essere animate. Le proprietà animabili tendono a colori e numeri. Un esempio è una proprietà non animabile background-image.

Supporto del 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 *

Maggiori informazioni

  • animazione su MDN
  • Utilizzo di animazioni CSS
  • animazione su W3C
  • Jank busting per prestazioni di rendering migliori
  • Animazione web al lavoro
  • Cinque modi per animare responsabilmente
  • Salto di stato, ritardi negativi, origine animata e altro ancora
  • Avvio delle animazioni CSS a metà
  • Animazioni ad alte prestazioni