Proprietà animation di CSS
Scopri la proprietà animation di CSS per animare gradualmente le proprietà CSS nel tempo. Esempi pratici inclusi.
La proprietà CSS animation consente di animare gli elementi — modificando gradualmente uno o più valori CSS nel tempo — senza utilizzare JavaScript. Funziona sulle proprietà i cui valori possono essere interpolati, come le dimensioni del layout (border, height, width), la posizione (left, top), font size, color e opacity.
Questa pagina tratta la forma abbreviata animation, tutte e otto le singole proprietà animation-* nella forma estesa, la regola @keyframes che le governa, come eseguire più animazioni contemporaneamente e come rispettare gli utenti che preferiscono il movimento ridotto. animation è una delle proprietà CSS3.
Un'animazione è composta da due parti: una regola @keyframes che descrive come appare l'elemento nei punti della sequenza temporale, e la proprietà animation (o le sue forme estese) sull'elemento che indica come riprodurre quella sequenza temporale — per quanto tempo, quante volte, in quale direzione e così via.
I browser meno recenti potrebbero richiedere il prefisso -webkit- per il supporto precedente.
Le proprietà che usano una parola chiave come valore, come display: none; o visibility: hidden;, non possono essere animate. Nemmeno le proprietà con valori come height: auto; possono essere animate.
La regola @keyframes
Per usare l'animazione devi prima specificare cosa deve accadere in momenti specifici durante l'animazione. Questo viene definito con la regola @keyframes.
La regola @keyframes è composta dalla parola chiave "@keyframes" seguita da animation-name, che identifica l'animazione. L'animazione viene poi applicata a un elemento usando questo identificatore come valore per la proprietà animation-name.
Nelle parentesi graffe inseriamo i selettori di keyframe, che definiscono i keyframe (o punti di passaggio) nella sequenza di animazione in cui gli stili devono cambiare. Il selettore di keyframe può iniziare con una percentuale (%) oppure con le parole chiave "from" (equivalente a 0%) e "to" (equivalente a 100%). 0% è il punto di partenza dell'animazione, 100% è il punto finale.
Esempio di animazione con la regola @keyframe:
Esempio della proprietà animation con @keyframes
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 4s infinite;
}
@keyframes pulse {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #d5dce8;
}
}
</style>
</head>
<body>
<div class="element">Background of this text is animated using CSS3 animation property.</div>
</body>
</html>In questo esempio, l'animazione è associata all'elemento <div>. L'animazione durerà 4 secondi e cambierà gradualmente il colore di sfondo dell'elemento <div> da "verde" a "grigio".
Proprietà correlate ad animation
animation è la proprietà abbreviata per impostare tutte le singole proprietà di animazione in un'unica dichiarazione. Le forme estese standard sono riassunte di seguito.
| Proprietà | Imposta | Valori comuni |
|---|---|---|
animation-name | La regola @keyframes da riprodurre | un nome, none |
animation-duration | Quanto dura un ciclo | 2s, 500ms (valore predefinito 0s — nessuna animazione) |
animation-timing-function | La curva di velocità all'interno di ogni ciclo | ease, linear, ease-in-out, cubic-bezier(…) |
animation-delay | Attesa prima dell'avvio | 1s, -2s (negativo avvia l'animazione a metà) |
animation-iteration-count | Quante volte riprodurre | un numero, infinite |
animation-direction | In avanti, al contrario o avanti e indietro | normal, reverse, alternate |
animation-fill-mode | Stili prima/dopo l'esecuzione | none, forwards, backwards, both |
animation-play-state | Se è in esecuzione o in pausa | running, paused |
Vediamo ora le proprietà correlate ad animation in azione.
Esempio di animazione con alcune proprietà correlate:
@keyframes pulse {
/* declare animation actions here */
}
.element {
animation-name: pulse;
animation-duration: 3.5s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: none;
animation-play-state: running;
}
/*
The same can be declared using the animation shorthand property
*/
.element {
animation: pulse 3.5s ease-in 1s alternate infinite none running;
}L'ordine dei valori nella forma abbreviata è per lo più flessibile, con due regole da ricordare: il nome deve essere presente e, quando compaiono sia una durata che un ritardo, il primo valore temporale è la durata e il secondo è il ritardo. Qualsiasi valore omesso ritorna al suo valore predefinito (ad esempio, omettere animation-iteration-count riproduce l'animazione una sola volta).
Animation-name
Questa proprietà definisce il nome della regola @keyframes che si vuole applicare.
Sintassi della proprietà animation-name
animation-name: keyframe-name | none | initial | inheritEsempio della proprietà animation-name:
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 50px;
animation: element 4s infinite;
}
@keyframes element {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #d5dce8;
}
}
</style>
</head>
<body>
<h2>Animation-name example</h2>
<div>The name of the animation is set as "element".</div>
</body>
</html>Animation-duration
Definisce il tempo (in secondi o millisecondi) che l'animazione impiega per completare un ciclo. Se questa proprietà non è specificata, l'animazione non avrà luogo.
Sintassi della proprietà animation-duration
animation-duration: time | initial | inheritEsempio della proprietà animation-duration:
<!DOCTYPE html>
<html>
<head>
<style>
.element {
padding: 50px;
animation: pulse 7s infinite;
}
@keyframes pulse {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #eee
}
}
</style>
</head>
<body>
<div class="element">Background of this text is animated using CSS3 animation property</div>
</body>
</html>Animation-timing-function
Questa proprietà definisce come un'animazione progredirà nel corso della durata di ogni ciclo — non nell'intera animazione.
Sintassi della proprietà animation-timing-function
animation-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n) | initial | inheritEsempio della proprietà animation-timing-function con il valore "ease":
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
div {
width: 100px;
height: 100px;
border-radius: 50%;
background: #1c87c9;
position: relative;
-webkit-animation: element 5s infinite;
/* Safari 4.0 - 8.0 */
-webkit-animation-timing-function: ease;
/* Safari 4.0 - 8.0 */
animation: element 5s infinite;
animation-timing-function: ease;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
@keyframes element {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-timing-function example</h2>
<div></div>
</body>
</html>Animation-delay
Questa proprietà imposta il tempo (in secondi o millisecondi) tra il caricamento dell'elemento e l'avvio dell'animazione.
Sintassi della proprietà animation-delay
animation-delay: time | initial | inheritEsempio della proprietà animation-delay:
Esempio della proprietà CSS animation-delay
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #1c87c9;
position: relative;
animation: delay 5s infinite;
animation-delay: 3s;
}
@keyframes delay {
from {
left: 0px;
}
to {
left: 300px;
}
}
</style>
</head>
<body>
<h2>Animation-delay example</h2>
<p>Here the animation starts after 3 seconds.</p>
<div></div>
</body>
</html>Animation-direction
Definisce se l'animazione deve essere riprodotta al contrario nei cicli alternati oppure no.
Sintassi della proprietà animation-direction
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inheritÈ possibile applicare i seguenti valori:
- normal — (valore predefinito) l'animazione viene riprodotta in avanti (keyframe da 0% a 100%)
- reverse — l'animazione viene riprodotta al contrario (keyframe da 100% a 0%)
- alternate — l'animazione viene riprodotta in avanti, poi viene invertita e ripetuta.
- alternate-reverse — l'animazione viene riprodotta al contrario, poi in avanti.
Esempio della proprietà animation-direction:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 120px;
height: 120px;
background: #ccc;
position: relative;
animation: myfirst 5s 1;
animation-direction: normal;
}
@keyframes myfirst {
0% {
background: #8DC3CF;
left: 0px;
top: 0px;
}
25% {
background: #1c87c9;
left: 200px;
top: 0px;
}
50% {
background: #030E10;
left: 200px;
top: 200px;
}
75% {
background: #666;
left: 0px;
top: 200px;
}
100% {
background: #8ebf42;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<h2>Animation-direction example</h2>
<p>Here the animation plays forwards.</p>
<div></div>
</body>
</html>Animation-iteration-count
Imposta il numero di volte in cui un ciclo di animazione deve essere riprodotto prima di fermarsi. Il valore predefinito è uno, ma è possibile impostare qualsiasi numero intero positivo. Se si imposta la parola chiave infinite, l'animazione verrà riprodotta all'infinito.
Un numero intero zero o negativo non farà mai avviare l'animazione.
Sintassi della proprietà animation-iteration-count
animation-iteration-count: number | infinite | initial | inheritEsempio della proprietà animation-iteration-count:
Esempio della proprietà CSS animation-iteration-count:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
div {
position: relative;
width: 100px;
height: 100px;
margin: 30px 0;
border-radius: 50%;
animation-name: pulse;
}
.element-one {
background-color: #1c87c9;
animation-duration: 3s;
animation-iteration-count: 3;
}
.element-two {
margin: 0;
background-color: #83bf42;
animation-duration: 5s;
animation-iteration-count: 2;
}
@keyframes pulse {
0% {
left: 0;
}
50% {
left: 50%;
}
100% {
left: 0;
}
}
</style>
</head>
<body>
<h2>The animation-iteration-count example</h2>
<p>The animation-iteration-count sets the number of times an animation cycle should be played before stopping.</p>
<div class="element-one"></div>
<div class="element-two"></div>
</body>
</html>Animation-fill-mode
Questa proprietà specifica uno stile per l'elemento applicato prima o dopo l'esecuzione dell'animazione.
Sintassi della proprietà animation-fill-mode
animation-fill-mode: none | forwards | backwards | both | initial | inheritPuò assumere i seguenti valori:
- forwards - specifica che l'elemento deve mantenere i valori di stile impostati dall'ultimo keyframe (dipende dalle proprietà animation-iteration-count e animation-direction).
- backwards - specifica che l'elemento deve ottenere i valori di stile impostati dal primo keyframe (dipende da animation-direction) e mantenerli durante il periodo animation-delay.
- both - specifica che l'animazione deve seguire le regole sia per forwards che per backwards.
- none - (valore predefinito) specifica che nessuno stile verrà applicato all'elemento prima o dopo l'esecuzione dell'animazione.
Esempio della proprietà animation-fill-mode con il valore "forwards":
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: #1c87c9;
position: relative;
-webkit-animation: element 5s;
/* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation: element 5s;
animation-fill-mode: forwards;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: blue;
}
}
@keyframes element {
from {
top: 0px;
}
to {
top: 200px;
background-color: #8ebf42;
}
}
</style>
</head>
<body>
<h2>Animation-fill-mode example</h2>
<div></div>
</body>
</html>Animation-play-state
Questa proprietà specifica se l'animazione è in esecuzione o in pausa.
Sintassi della proprietà animation-play-state
animation-play-state: paused | running | initial | inheritIl valore predefinito è running.
Esempio della proprietà animation-play-state con il valore "running":
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 150px;
height: 150px;
background: #ccc;
position: relative;
animation: play 10s;
animation-play-state: running;
}
@keyframes play {
from {
left: 0px;
}
to {
left: 200px;
}
}
</style>
</head>
<body>
<h2>Animation-play-state example</h2>
<p>Here the animation-play-state is set to "running".</p>
<div></div>
</body>
</html>Animazioni multiple
È possibile dichiarare più animazioni su un selettore; è sufficiente separare i valori con le virgole.
Esempio di animazioni multiple su un selettore:
Esempio della proprietà animation con animazioni multiple
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.element {
height: 200px;
width: 200px;
background-color: #1c87c9;
animation: pulse 5s ease infinite alternate, nudge 5s linear infinite alternate;
}
@keyframes pulse {
0%,
100% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
}
@keyframes nudge {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(150px, 0);
}
80% {
transform: translate(-150px, 0);
}
}
</style>
</head>
<body>
<div class="element"></div>
</body>
</html>Rispettare il movimento ridotto
Il movimento eccessivo o costante può causare nausea, vertigini o emicranie ad alcuni utenti. I sistemi operativi espongono un'impostazione "riduci movimento" e puoi rispettarla con la media query prefers-reduced-motion — disattivando le animazioni (o attenuandole) per quegli utenti, mantenendole per tutti gli altri.
.element {
animation: pulse 4s infinite;
}
@media (prefers-reduced-motion: reduce) {
.element {
animation: none;
}
}È buona pratica racchiudere qualsiasi movimento non essenziale in questa query, in modo che le animazioni rimangano accessibili.
Errori comuni
- Senza
animation-durationnon c'è animazione. La durata predefinita è0s, quindi i keyframe non hanno mai la possibilità di essere riprodotti. - I valori keyword e
autonon si animano. Come indicato sopra, le proprietà comedisplay,visibilityeheight: autonon possono essere interpolate. Anima inveceopacityetransform— sono anche le più performanti da animare. forwardsfunziona solo se il numero di iterazioni è finito.animation-fill-mode: forwardsmantiene l'ultimo keyframe dopo la fine dell'animazione; coninfinitenon finisce mai, quindi non c'è nulla da mantenere.- L'ordine conta per i valori temporali nella forma abbreviata. Il primo
<time>è la durata, il secondo è il ritardo.
Proprietà correlate
- @keyframes — definisce la sequenza temporale dell'animazione.
- animation-name — sceglie quale regola @keyframes riprodurre.
- transition — anima tra due stati su un trigger come
:hover. - transform — sposta, ridimensiona e ruota gli elementi (ideale da animare).