CSS @keyframes
La direttiva CSS3 @keyframes crea animazioni personalizzate
La direttiva @keyframes
permette di definire il comportamento di un'animazione nei diversi momenti della sua esecuzione. Viene usata in combinazione con proprietà come animation-name
e animation-duration
per creare animazioni fluide e coinvolgenti.
Sintassi
percentuale { proprietà: valore; }
...
}
Significato dei valori principali:
nome_animazione: il nome dell’animazione, che sarà associato tramite la proprietà
animation-name
.percentuali: punti temporali dell’animazione, come
0%
,100%
, oppurefrom
(equivale a 0%) eto
(equivale a 100%).proprietà CSS: definiscono lo stato dell’elemento in quel punto dell’animazione (es.
transform
,opacity
,color
).
Esempio proprietà: @keyframes
Codice Esempio: @keyframes

.animated-box {
width: 100px;
height: 100px;
background-color: #50a14f;
position: relative;
animation-name: slideAndColor;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes slideAndColor {
0% {
left: 0;
background-color: #50a14f;
}
50% {
left: 200px;
background-color: #ff6347;
}
100% {
left: 0;
background-color: #50a14f;
}
}
Contenuto Esempio: @keyframes
Esempio di utilizzo di @keyframes
In questo esempio, un box cambia colore e si sposta da sinistra verso destra:
CSS e HTML per l'esempio con @keyframes
:
<style>
.animated-box {
width: 100px;
height: 100px;
background-color: #50a14f;
position: relative;
animation-name: slideAndColor;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes slideAndColor {
0% {
left: 0;
background-color: #50a14f;
}
50% {
left: 200px;
background-color: #ff6347;
}
100% {
left: 0;
background-color: #50a14f;
}
}
</style>
<div class="animated-box"></div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.