Animazioni CSS

Animazioni CSS

CSS può implementare l'effetto animazione degli elementi HTML senza utilizzare JavaScript o Flash!

CSS

In questa sezione, imparerai le seguenti proprietà:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Supporto del browser per l'animazione

I numeri nella tabella indicano la versione del browser che supporta completamente l'attributo.

Proprietà Chrome IE Firefox Safari Opera
@keyframes 43.0 10.0 16.0 9.0 30.0
animation-name 43.0 10.0 16.0 9.0 30.0
animation-duration 43.0 10.0 16.0 9.0 30.0
animation-delay 43.0 10.0 16.0 9.0 30.0
animation-iteration-count 43.0 10.0 16.0 9.0 30.0
animation-direction 43.0 10.0 16.0 9.0 30.0
animation-timing-function 43.0 10.0 16.0 9.0 30.0
animation-fill-mode 43.0 10.0 16.0 9.0 30.0
animation 43.0 10.0 16.0 9.0 30.0

Cos'è CSS animazione?

Le animazioni permettono all'elemento di passare gradualmente da uno stile a un altro.

Puoi modificare liberamente qualsiasi numero di proprietà CSS.

Per utilizzare CSS animazioni, devi prima specificare alcune fotogrammi chiave per l'animazione.

I fotogrammi chiave contengono lo stile dell'elemento in un momento specifico.

@keyframes regola

Se stai @keyframes Le regole specificano lo stile CSS, l'animazione passerà gradualmente dallo stile corrente al nuovo stile in un momento specifico.

Per rendere l'animazione efficace, devi legarla a un elemento.

Esempio seguente lega l'animazione "example" all'elemento <div>. L'animazione durerà 4 secondi, cambiando gradualmente il colore di sfondo dell'elemento <div> da "red" a "yellow":

Esempio

/* Codice dell'animazione */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
/* Applica l'effetto animazione a questo elemento */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Prova tu stesso

Attenzione:animation-duration La proprietà definisce quanto tempo ci vuole per completare l'animazione. Se non specificata animation-duration Se non viene specificata la proprietà, l'animazione non avverrà perché il valore predefinito è 0s (0 secondi).

Nell'esempio sopra, utilizzando i termini chiave "from" e "to" (che rappresentano 0% (inizio) e 100% (fine)), abbiamo impostato quando cambia lo stile.

Puoi anche usare valori percentuali. Utilizzando i percentuali, puoi aggiungere quante più modifiche di stile desideri.

Esempio seguente cambia il colore di sfondo dell'elemento <div> al 25%, al 50% e al 100% di completamento dell'animazione:

Esempio

/* Codice dell'animazione */
@keyframes example {
  0%   {background-color: red;}
  25% {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
/* Elementi che applicano l'animazione */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Prova tu stesso

Esempio seguente cambia il colore di sfondo e la posizione dell'elemento <div> al 25%, 50% e 100% della fine dell'animazione:

Esempio

/* Codice dell'animazione */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}
/* Elementi che applicano l'animazione */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Prova tu stesso

Ritarda l'animazione

animation-delay L'attributo specifica il tempo di ritardo prima dell'inizio dell'animazione.

Esempio seguente ha un ritardo di 2 secondi prima di iniziare l'animazione:

Esempio

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Prova tu stesso

Sono ammessi anche valori negativi. Se si utilizzano valori negativi, l'animazione inizierà a riprodursi come se già fosse stata riprodotta per N secondi.

Nell'esempio seguente, l'animazione inizierà a riprodursi come se già fosse stata riprodotta per 2 secondi:

Esempio

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Prova tu stesso

Imposta il numero di volte che l'animazione deve essere eseguita

animation-iteration-count L'attributo specifica il numero di volte che l'animazione deve essere eseguita.

Esempio seguente esegue l'animazione 3 volte prima di fermarsi:

Esempio

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

Prova tu stesso

Esempio seguente utilizza il valore "infinite" per far durare l'animazione per sempre:

Esempio

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Prova tu stesso

Esegui animazione in senso inverso o alternato

animation-direction L'attributo specifica se l'animazione deve essere riprodotta in senso diretto, inverso o alternato.

animation-direction L'attributo accetta i seguenti valori:

  • normal - L'animazione viene riprodotta in modo normale (verso avanti). Valore predefinito
  • reverse - L'animazione viene riprodotta in senso inverso (verso indietro)
  • alternate - L'animazione viene riprodotta prima in senso diretto e poi in senso inverso
  • alternate-reverse - L'animazione viene riprodotta prima in senso inverso e poi in senso diretto

Esempio seguente esegue l'animazione in senso inverso (verso indietro):

Esempio

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

Prova tu stesso

Esempio seguente utilizza il valore "alternate" per far eseguire l'animazione prima in senso diretto e poi in senso inverso:

Esempio

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

Prova tu stesso

Esempio seguente utilizza il valore "alternate-reverse" per far eseguire l'animazione prima in senso inverso e poi in senso diretto:

Esempio

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Prova tu stesso

Specificare la curva di velocità dell'animazione

animation-timing-function L'attributo definisce la curva di velocità dell'animazione.

animation-timing-function L'attributo accetta i seguenti valori:

  • ease - Specifica un'animazione che inizia lentamente, poi accelera, poi termina lentamente (predefinito)
  • linear - Stabilisci un'animazione in cui la velocità è la stessa da inizio a fine
  • ease-in - Stabilisci un'animazione che inizia lentamente
  • ease-out - Stabilisci un'animazione che termina lentamente
  • ease-in-out - Specifica un'animazione che inizia e termina più lentamente
  • cubic-bezier(n,n,n,n) - Esegui i valori definiti da te nella funzione di Bezier a tre punti

Esempi seguenti mostrano alcune curve di velocità diverse che possono essere utilizzate:

Esempio

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Prova tu stesso

Specificare il modello di riempimento dell'animazione

Le animazioni CSS non influenzeranno l'elemento prima della riproduzione del primo frame chiave o dopo la riproduzione dell'ultimo frame chiave.animation-fill-mode l'attributo può sovrascrivere questo comportamento.

Quando l'animazione non viene riprodotta (prima dell'inizio, dopo la fine o entrambi i termini),animation-fill-mode L'attributo definisce lo stile dell'elemento target.

L'attributo animation-fill-mode accetta i seguenti valori:

  • none - Valore predefinito. L'animazione non applicherà alcun stile all'elemento prima o dopo l'esecuzione.
  • forwards - L'elemento manterrà il valore dello stile impostato dal frame chiave finale (dipende da animation-direction e animation-iteration-count).
  • backwards - L'elemento riceverà il valore dello stile impostato dal primo frame chiave (a seconda di animation-direction) e lo manterrà durante il periodo di ritardo dell'animazione.
  • both - L'animazione seguirà contemporaneamente le regole in avanti e indietro, espandendo le proprietà dell'animazione in entrambe le direzioni.

Esempio seguente mantiene il valore dello stile del frame chiave finale dell'elemento <div> alla fine dell'animazione:

Esempio

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

Prova tu stesso

Nell'esempio seguente, l'elemento <div> assume il valore dello stile della prima chiave chiave prima dell'inizio dell'animazione (durante il periodo di ritardo dell'animazione):

Esempio

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

Prova tu stesso

Nell'esempio seguente, l'elemento <div> assume il valore dello stile della prima chiave chiave prima dell'inizio dell'animazione e mantiene il valore dello stile dell'ultima chiave chiave alla fine dell'animazione:

Esempio

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Prova tu stesso

Attributi abbreviati di animazione

Nell'esempio seguente vengono utilizzati sei attributi di animazione:

Esempio

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Prova tu stesso

Utilizzando la scrittura abbreviata animation L'attributo può anche ottenere l'effetto di animazione dello stesso esempio precedente:

Esempio

div {
  animation: example 5s linear 2s infinite alternate;
}

Prova tu stesso

Attributi di animazione CSS

La tabella seguente elenca le regole @keyframes e tutti gli attributi di animazione CSS:

Proprietà Descrizione
@keyframes Stabilisce il modello di animazione.
animation Imposta la proprietà abbreviata per tutti gli attributi di animazione.
animation-delay Stabilisce il ritardo di inizio dell'animazione.
animation-direction Determina se l'animazione viene riprodotta in avanti, all'indietro o alternativamente.
animation-duration Stabilisce il tempo che deve essere impiegato per completare un ciclo dell'animazione.
animation-fill-mode Stabilisce lo stile dell'elemento quando non viene riprodotta l'animazione (prima di iniziare, dopo la fine, o entrambi).
animation-iteration-count Stabilisce il numero di volte che l'animazione deve essere riprodotta.
animation-name Stabilisce il nome dell'animazione @keyframes.
animation-play-state Definire se l'animazione deve eseguire o fermarsi.
animation-timing-function Definire la curva di velocità dell'animazione.