Le transizioni CSS permettono di animare i cambiamenti delle proprietà in modo fluido.
Sintassi
.button {
background: blue;
transition: background 0.3s ease;
}
.button:hover {
background: darkblue;
}Proprietà transition
transition-property: proprietà da animare (o all)transition-duration: durata (es. 0.3s, 300ms)transition-timing-function: ease, linear, ease-in, ease-out, ease-in-outtransition-delay: ritardo prima dell avvio
Shorthand
.box {
transition: all 0.3s ease-in-out 0.1s;
/* property duration timing delay */
}