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.
Supporto Browser
IP: 18.97.14.88
