Animazioni CSS con @keyframes
Le animazioni CSS permettono di creare movimenti complessi definendo stati intermedi.
Definire l animazione
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Con percentuali */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}Applicare l animazione
.element {
animation: fadeIn 1s ease-in-out;
animation: bounce 0.5s ease infinite;
/* name duration timing iteration-count */
}Proprietà animation
.box {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 0.5s;
animation-fill-mode: forwards; /* Mantiene stato finale */
}