Animazioni CSS

Animazioni CSS

CSS può realizzare 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?

L'animazione fa sì che un elemento passi gradualmente da uno stile a un altro.

Puoi modificare liberamente qualsiasi numero di proprietà CSS.

Per utilizzare CSS animazione, 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, è necessario associare l'animazione a un elemento.

Esempio seguente associa 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 a te stesso

Attenzione:animation-duration L'attributo definisce quanto tempo ci vuole per completare l'animazione. Se non specificato animation-duration Se non si specifica l'attributo, l'animazione non avverrà perché il valore predefinito è 0s (0 secondi).

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

Puoi anche usare valori percentuali. Utilizzando percentuali, puoi aggiungere quante più stili desideri.

Esempio seguente cambia il colore di sfondo dell'elemento <div> al 25%, al 50% e al 100% della durata 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 applicativi dell'animazione */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Prova a te stesso

Esempio di utilizzo in cui il colore di sfondo e la posizione dell'elemento <div> vengono modificati 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 applicativi dell'animazione */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Prova a te stesso

Ritardare l'animazione

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

Esempio di utilizzo in cui c'è 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 a te 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 a te stesso

Impostare 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 di utilizzo in cui l'animazione viene eseguita 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 a te stesso

Esempio di utilizzo del 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 a te stesso

Eseguire l'animazione in senso inverso o alternativamente

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

animation-direction L'attributo accetta i seguenti valori:

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

L'esempio seguente eseguirà l'animazione in senso inverso (all'indietro):

Esempio

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

Prova a te stesso

Esempio di utilizzo del 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 a te stesso

Esempio di utilizzo del 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 a te stesso

Specificare la curva di velocità dell'animazione

animation-timing-function L'attributo determina 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 - Regola un'animazione con la stessa velocità dall'inizio alla fine
  • ease-in - Regola un'animazione che inizia più lentamente
  • ease-out - Regola un'animazione che termina più lentamente
  • ease-in-out - Specifica un'animazione che inizia e termina più lentamente
  • cubic-bezier(n,n,n,n) - Definisci i valori da te definiti nella funzione cubica Bezier

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 a te stesso

Specificare il modello di riempimento dell'animazione

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

Quando l'animazione non è in esecuzione (prima dell'inizio, dopo la fine, o entrambi i termini),animation-fill-mode L'attributo determina 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à lo stile impostato dal frame chiave finale (dipende da animation-direction e animation-iteration-count).
  • backwards - L'elemento riceverà lo stile impostato dal primo frame chiave (a seconda di animation-direction) e manterrà questo valore durante il 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 lo 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 a te stesso

Nell'esempio seguente, l'elemento <div> assume il valore dello stile della prima keyframe 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 a te stesso

Nell'esempio seguente, l'elemento <div> assume il valore dello stile della prima keyframe prima dell'inizio dell'animazione e mantiene il valore dello stile dell'ultima keyframe 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 a te 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 a te stesso

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

Esempio

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

Prova a te stesso

Proprietà di animazione CSS

La tabella seguente elenca le regole @keyframes e tutte le proprietà di animazione CSS:

Proprietà Descrizione
@keyframes Definisce il modello di animazione.
animation Imposta l'attributo abbreviato per tutte le proprietà di animazione.
animation-delay Definisce il ritardo di inizio dell'animazione.
animation-direction Determina se l'animazione viene riprodotta avanti, indietro o alternativamente.
animation-duration Definisce il tempo necessario per completare un ciclo dell'animazione.
animation-fill-mode Definisce lo stile dell'elemento quando l'animazione non viene riprodotta (prima dell'inizio, dopo la fine, o entrambi).
animation-iteration-count Definisce il numero di volte che l'animazione deve essere riprodotta.
animation-name Definisce il nome dell'animazione @keyframes.
animation-play-state Definire se l'animazione deve essere eseguita o fermata.
animation-timing-function Definire la curva di velocità dell'animazione.