Animazioni CSS
Animazioni CSS
CSS consente l'animazione di elementi HTML senza utilizzare JavaScript o Flash!
In questo capitolo imparerai le seguenti proprietà:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
Supporto del browser per le animazioni
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
| Property | |||||
|---|---|---|---|---|---|
| @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 |
Cosa sono le animazioni CSS?
Un'animazione consente a un elemento di passare gradualmente da uno stile all'altro.
Puoi modificare tutte le proprietà CSS che desideri, tutte le volte che vuoi.
Per utilizzare l'animazione CSS, devi prima specificare alcuni fotogrammi chiave per l'animazione.
I fotogrammi chiave contengono gli stili che l'elemento avrà in determinati momenti.
La regola dei fotogrammi chiave @
Quando specifichi gli stili CSS all'interno della @keyframes
regola, l'animazione cambierà gradualmente dallo stile corrente al nuovo stile in determinati momenti.
Per far funzionare un'animazione, devi associare l'animazione a un elemento.
L'esempio seguente associa l'animazione "example" all'elemento <div>. L'animazione durerà 4 secondi e cambierà gradualmente il colore di sfondo dell'elemento <div> da "rosso" a "giallo":
Esempio
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Nota: la animation-durationproprietà definisce il tempo necessario per il completamento di un'animazione. Se la animation-durationproprietà non è specificata, non si verificherà alcuna animazione, poiché il valore predefinito è 0s (0 secondi).
Nell'esempio sopra abbiamo specificato quando lo stile cambierà usando le parole chiave "da" e "a" (che rappresenta 0% (inizio) e 100% (completa)).
È anche possibile utilizzare la percentuale. Usando la percentuale, puoi aggiungere tutte le modifiche di stile che desideri.
L'esempio seguente cambierà il colore di sfondo dell'elemento <div> quando l'animazione è completa al 25%, completa al 50% e di nuovo quando l'animazione è completa al 100%:
Esempio
/* The animation code */
@keyframes example
{
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
L'esempio seguente cambierà sia il colore di sfondo che la posizione dell'elemento <div> quando l'animazione è completa al 25%, completa al 50% e di nuovo quando l'animazione è completa al 100%:
Esempio
/* The animation code */
@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;}
}
/* The element to apply the animation to */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Ritarda un'animazione
La animation-delayproprietà specifica un ritardo per l'inizio di un'animazione.
L'esempio seguente ha un ritardo di 2 secondi prima di avviare l'animazione:
Esempio
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Sono ammessi anche valori negativi. Se si utilizzano valori negativi, l'animazione inizierà come se fosse già stata riprodotta per N secondi.
Nell'esempio seguente, l'animazione inizierà come se fosse già 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;
}
Imposta quante volte deve essere eseguita un'animazione
La animation-iteration-countproprietà specifica il numero di volte in cui deve essere eseguita un'animazione.
L'esempio seguente eseguirà l'animazione 3 volte prima che si interrompa:
Esempio
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
L'esempio seguente utilizza il valore "infinito" per far sì che l'animazione continui per sempre:
Esempio
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count:
infinite;
}
Esegui l'animazione in direzione inversa o cicli alternati
La animation-directionproprietà specifica se un'animazione deve essere riprodotta in avanti, indietro o in cicli alternati.
La proprietà direzione-animazione può avere i seguenti valori:
normal- L'animazione viene riprodotta normalmente (avanti). Questo è predefinitoreverse- L'animazione viene riprodotta in direzione inversa (indietro)alternate- L'animazione viene riprodotta prima in avanti, poi all'indietroalternate-reverse- L'animazione viene riprodotta prima all'indietro, poi in avanti
L'esempio seguente eseguirà l'animazione in direzione inversa (indietro):
Esempio
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction:
reverse;
}
L'esempio seguente usa il valore "alternate" per far scorrere l'animazione prima in avanti, poi all'indietro:
Esempio
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction:
alternate;
}
L'esempio seguente usa il valore "alternate-reverse" per fare in modo che l'animazione venga eseguita prima all'indietro, quindi in avanti:
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;
}
Specificare la curva di velocità dell'animazione
La animation-timing-functionproprietà specifica la curva di velocità dell'animazione.
La proprietà della funzione di temporizzazione dell'animazione può avere i seguenti valori:
ease- Specifica un'animazione con un inizio lento, poi veloce, quindi termina lentamente (questo è l'impostazione predefinita)linear- Specifica un'animazione con la stessa velocità dall'inizio alla fineease-in- Specifica un'animazione con un inizio lentoease-out- Specifica un'animazione con un'estremità lentaease-in-out- Specifica un'animazione con un inizio e una fine lenticubic-bezier(n,n,n,n)- Consente di definire i propri valori in una funzione cubic-bezier
L'esempio seguente mostra alcune delle diverse curve di velocità 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;}
Specificare la modalità di riempimento per un'animazione
Le animazioni CSS non influiscono su un elemento prima della riproduzione del primo fotogramma chiave o dopo la riproduzione dell'ultimo fotogramma chiave. La proprietà animation-fill-mode può ignorare questo comportamento.
La animation-fill-modeproprietà specifica uno stile per l'elemento di destinazione quando l'animazione non è in riproduzione (prima dell'inizio, dopo la fine o entrambi).
La proprietà animation-fill-mode può avere i seguenti valori:
none- Valore di default. L'animazione non applicherà alcuno stile all'elemento prima o dopo l'esecuzioneforwards- L'elemento manterrà i valori di stile impostati dall'ultimo fotogramma chiave (dipende dalla direzione dell'animazione e dal conteggio delle iterazioni dell'animazione)backwards- L'elemento otterrà i valori di stile impostati dal primo fotogramma chiave (dipende dalla direzione dell'animazione) e li manterrà durante il periodo di ritardo dell'animazioneboth- L'animazione seguirà le regole sia in avanti che all'indietro, estendendo le proprietà dell'animazione in entrambe le direzioni
L'esempio seguente consente all'elemento <div> di mantenere i valori di stile dell'ultimo fotogramma chiave al termine dell'animazione:
Esempio
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
L'esempio seguente consente all'elemento <div> di ottenere i valori di stile impostati dal primo fotogramma 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;
}
L'esempio seguente consente all'elemento <div> di ottenere i valori di stile impostati dal primo fotogramma chiave prima dell'inizio dell'animazione e di mantenere i valori di stile dell'ultimo fotogramma chiave al termine 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;
}
Proprietà abbreviazione di animazione
L'esempio seguente utilizza sei delle proprietà dell'animazione:
Esempio
div
{
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Lo stesso effetto di animazione di cui sopra può essere ottenuto utilizzando la
animationproprietà shorthand:
Esempio
div
{
animation: example 5s linear 2s infinite alternate;
}
Proprietà di animazione CSS
La tabella seguente elenca la regola @keyframes e tutte le proprietà di animazione CSS:
| Property | Description |
|---|---|
| @keyframes | Specifies the animation code |
| animation | A shorthand property for setting all the animation properties |
| animation-delay | Specifies a delay for the start of an animation |
| animation-direction | Specifies whether an animation should be played forwards, backwards or in alternate cycles |
| animation-duration | Specifies how long time an animation should take to complete one cycle |
| animation-fill-mode | Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
| animation-iteration-count | Specifies the number of times an animation should be played |
| animation-name | Specifies the name of the @keyframes animation |
| animation-play-state | Specifies whether the animation is running or paused |
| animation-timing-function | Specifies the speed curve of the animation |