Regola CSS @keyframes
La regola @keyframes definisce il codice dell'animazione, modificando gradualmente uno stile CSS in un altro.
La at-rule @keyframes è la base delle animazioni keyframe utilizzate per animare (cambiare gradualmente da uno stile a un altro) molte proprietà CSS. Questa regola consente di specificare cosa dovrebbe accadere in determinati momenti durante l'animazione, definendo gli stili per i keyframe (o punti di passaggio) lungo la sequenza di animazione.
La regola @keyframes è una parte fondamentale della specifica CSS Animations.
La regola @keyframes e il suo identificatore sono seguiti da set di regole (ovvero regole di stile con selettori e blocchi di dichiarazione, come nel normale codice CSS) delimitati da parentesi graffe.
Keyframe nella sequenza di animazione
All'interno delle parentesi graffe, i selettori keyframe definiscono quando gli stili devono cambiare durante la sequenza di animazione. L'insieme delle proprietà CSS può essere aggiornato più volte nel corso dell'animazione.
Selettore keyframe
Il blocco di dichiarazione keyframe include proprietà CSS e i loro valori. Un selettore keyframe può utilizzare una percentuale (%) o le parole chiave from (equivalente a 0%) e to (equivalente a 100%). Lo 0% segna l'inizio dell'animazione, e il 100% ne segna la fine.
Non sei limitato a due keyframe. Aggiungere selettori intermedi come 25% o 75% ti permette di controllare l'animazione in tutti i punti necessari:
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}Puoi anche raggruppare selettori che condividono gli stessi stili, separandoli con virgole: 0%, 100% { opacity: 1; }.
Come il browser riempie gli spazi vuoti
Devi dichiarare gli stili solo nei punti dei keyframe — il browser interpola ogni fotogramma intermedio. Se animazione background-color dal verde allo 0% al blu al 50%, i colori si fondono gradualmente in quell'intervallo; non è necessario specificare i valori intermedi.
Alcune regole governano questo processo di interpolazione:
- Solo le proprietà animabili vengono interpolate. Valori numerici e colori (come
width,opacity,transformecolor) si animano fluidamente. Proprietà comedisplaysaltano istantaneamente tra i keyframe invece di eseguire una transizione graduale. - Il ritmo è controllato separatamente. La forma della curva di interpolazione (linear, ease, ease-in-out, ecc.) proviene da animation-timing-function, non da
@keyframes. - I
from/tomancanti vengono dedotti. Se ometti il keyframe0%o100%, il browser utilizza il valore calcolato esistente dell'elemento per quella proprietà come punto finale mancante.
Prefissi vendor
La regola @keyframes è completamente supportata da tutti i browser moderni senza la necessità di prefissi vendor. I prefissi legacy (come -webkit- o -moz-) non sono più necessari.
Sintassi
Sintassi della at-rule CSS @keyframes
@keyframes animationname {keyframes-selector {css-styles;}}Utilizzo di @keyframes come parola chiave
La regola @keyframes è composta dalla parola chiave @keyframes seguita da un identificatore (scelto dallo sviluppatore) che definisce l'animazione. Per collegare l'animazione a un elemento, questo identificatore viene utilizzato come valore per la proprietà animation-name.
Ecco come appare:
Come definire un'animazione e applicarla a un elemento
/* define the animation */
@keyframes your-animation-name {
/* style rules */
}
/* apply it to an element */
.element {
animation-name: your-animation-name;
/* OR using the animation shorthand property */
animation: your-animation-name 1s …;
}Esempio della regola @keyframes con la proprietà background-color:
Esempio di at-rule CSS @keyframes
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
padding: 50px;
animation: backgrounds 4s infinite;
}
@keyframes backgrounds {
0% {
background-color: #8ebf42;
}
50% {
background-color: #1c87c9;
}
100% {
background-color: #cccccc;
}
}
</style>
</head>
<body>
<h2>@keyframes example</h2>
<div class="element">The background of this text is animated.</div>
</body>
</html>In questo esempio, animiamo la proprietà background-color. Prima, impostiamo un identificatore per l'animazione: backgrounds. Poi impostiamo i selettori keyframe (0%, 50% e 100%) e definiamo i valori per la proprietà: verde, blu e grigio. Ciò significa che al punto di partenza (0%), il colore di sfondo sarà verde chiaro fino a raggiungere il keyframe successivo (50%). A metà della sequenza di animazione, lo sfondo diventerà blu chiaro, e al punto finale (100%) sarà grigio.
Esempio della regola @keyframes:
Esempio di at-rule CSS @keyframes con valore infinite
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
width: 10px;
height: 100px;
background: red;
border-radius: 50%;
position: relative;
animation: element 4s infinite;
}
@keyframes element {
0% {
top: 0px;
background: #1c87c9;
width: 100px;
}
100% {
top: 200px;
background: #8ebf42;
width: 150px;
}
}
</style>
</head>
<body>
<h2>@keyframes rule example</h2>
<div></div>
</body>
</html>Esempio di utilizzo della regola @keyframes per creare un'immagine in caduta:
Esempio di at-rule CSS @keyframes con la proprietà transform
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html,
body {
height: 90%;
}
.container {
margin: 30px auto;
min-width: 320px;
max-width: 600px;
height: 90%;
overflow: hidden;
}
img {
transform-origin: left center;
animation: fall 5s infinite;
}
@keyframes fall {
from {
transform: rotate(0) translateX(0);
opacity: 1;
}
to {
transform: rotate(90deg) translateX(200px);
opacity: 0.1;
}
}
</style>
</head>
<body>
<h2>@keyframes example</h2>
<div class="container">
<img src="https://api.w3docs.com/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" alt="W3docs" width="150" height="50" />
</div>
</body>
</html>Componenti della sintassi
| Componente | Descrizione |
|---|---|
identifier | Specifica il nome dell'animazione. Obbligatorio. |
keyframe-selector | Specifica la percentuale della durata dell'animazione. Accetta valori da 0% a 100%, from (0%) o to (100%). Obbligatorio. |
declaration-block | Contiene le proprietà CSS e i valori da applicare a ciascun keyframe. Obbligatorio. |
Errori comuni
@keyframesda solo non fa nulla. La regola si limita a definire l'animazione. Nulla si muove finché non si fa riferimento al nome da un elemento tramite la proprietà animation-name (o la forma abbreviataanimation) e non si assegna una animation-duration diversa da zero.- I nomi distinguono maiuscole e minuscole e non devono essere parole chiave CSS globali. Evita parole riservate come
none,initial,inheriteunsetcome nomi di animazione. - Le regole keyframe duplicate si sovrappongono in cascata. Se due blocchi
@keyframescondividono lo stesso nome, l'ultimo definito ha la precedenza completa — non vengono uniti. !importantall'interno di un keyframe viene ignorato. La specifica Animations elimina specificamente le dichiarazioni!importantall'interno dei keyframe.
Argomenti correlati
- animation — la forma abbreviata che collega una definizione keyframe a un elemento.
- animation-name — seleziona quale regola
@keyframesviene eseguita. - animation-duration — la durata di un ciclo completo.
- animation-timing-function — la curva di easing tra i keyframe.
- animation-iteration-count — quante volte l'animazione si ripete.