Proprietà CSS animation
Scopri la proprietà CSS animation, usata per animare (passare gradualmente da uno stile all'altro) le proprietà CSS con valori discreti. Guarda gli esempi.
La proprietà animation si usa per animare (passare gradualmente da uno stile all'altro) le proprietà CSS con valori continui: proprietà di layout (border, height, width, ecc.), proprietà che definiscono la posizione (left, top), dimensioni dei font, colori e opacità.
La proprietà animation è una delle proprietà CSS3.
I browser più datati potrebbero richiedere il prefisso -webkit- per il supporto delle versioni precedenti.
Le proprietà che usano una parola chiave come valore, come display: none; o visibility: hidden;, non possono essere animate. Anche le proprietà con valori come height: auto; non possono essere animate.
La at-rule @keyframes
Per usare un'animazione devi prima specificare cosa deve accadere in momenti specifici durante l'animazione. Questo si definisce con la at-rule @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 della proprietà animation-name.
Tra le parentesi graffe inseriamo i selettori dei keyframe, che definiscono i keyframe (o punti di riferimento) nella sequenza dell'animazione in cui gli stili devono cambiare. Il selettore di keyframe può iniziare con una percentuale (%) oppure con le parole chiave "from" (uguale a 0%) e "to" (uguale 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 leghiamo l'animazione all'elemento <div>. L'animazione durerà 4 secondi e cambierà gradualmente il colore di sfondo dell'elemento <div> da "verde" a "grigio".
Proprietà relative all'animazione
animation è la proprietà shorthand usata per impostare tutte le proprietà dell'animazione in un'unica dichiarazione. Di seguito elenchiamo tutte le proprietà standard relative all'animazione.
Ora vediamo all'opera le proprietà relative all'animazione.
Esempio di animazione con alcune proprietà relative all'animazione:
@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;
}Animation-name
Questa proprietà definisce il nome della regola @keyframes che vuoi 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 la durata (in secondi o millisecondi) necessaria all'animazione per completare un ciclo. Se questa proprietà non viene 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 l'animazione procederà nel corso di ogni ciclo, non per l'intera durata dell'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) che intercorre tra il caricamento dell'elemento e l'inizio 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 debba essere riprodotta al contrario nei cicli alternati oppure no.
Sintassi della proprietà animation-direction
animation-direction: normal | reverse | alternate | alternate-reverse | initial | inheritSi possono applicare i seguenti valori:
- normal — (predefinito) l'animazione viene riprodotta in avanti (keyframe da 0% a 100%)
- reverse — l'animazione viene riprodotta all'indietro (keyframe da 100% a 0%)
- alternate — l'animazione viene riprodotta in avanti, poi invertita e ripetuta.
- alternate-reverse — l'animazione viene riprodotta all'indietro e 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 valore intero positivo. Se imposti la parola chiave infinite, l'animazione verrà riprodotta all'infinito.
Un numero intero pari a zero o negativo non riprodurrà mai l'animazione.
Sintassi della proprietà animation-iteration-count
animation-iteration-count: number | infinite | initial | inheritEsempio della proprietà animation-iteration-count:
Esempio della proprietà CSS <span class="property">animation-iteration-count</span>:
<!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 da applicare all'elemento 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 assumere i valori di stile impostati dal primo keyframe (dipende da animation-direction) e mantenerli durante il periodo di animation-delay.
- both - specifica che l'animazione deve seguire le regole sia di forwards che di backwards.
- none - (predefinito) specifica che non verrà applicato alcuno stile 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 riproduzione 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: basta separare i valori con le virgole.
Esempio di più animazioni 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>