CSS transition
La proprietà CSS3 transition anima i cambiamenti delle proprietà CSS
La proprietà transition
in CSS3 consente di rendere fluido il passaggio tra due stati di un elemento. Specificando proprietà come duration
, timing-function
e delay
, è possibile ottenere effetti visivi dinamici senza utilizzare JavaScript.
Sintassi
Significato dei valori principali:
-
property: La proprietà CSS da animare (es:
background-color
,width
,opacity
). Può essere ancheall
. -
duration: La durata della transizione (es:
0.3s
,1s
,500ms
). -
timing-function: La funzione che definisce la velocità dell’animazione nel tempo (es:
ease
,linear
,ease-in
,ease-out
,cubic-bezier()
). -
delay: Ritardo prima dell’inizio della transizione (es:
0s
,1s
).
Esempio proprietà: transition
Codice Esempio: transition

.transition-example {
width: 300px;
height: 150px;
background-color: #61afef;
color: white;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition: background-color 0.5s ease;
}
.transition-example:hover {
background-color: #e06c75;
}
Contenuto Esempio: transition
Esempio di utilizzo di transition
In questo esempio, al passaggio del mouse, l'elemento cambia colore di sfondo con una transizione fluida della durata di 0.5 secondi:
CSS e HTML per l'elemento con transition
applicata:
<style>
.transition-example {
width: 300px;
height: 150px;
background-color: #61afef;
color: white;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition: background-color 0.5s ease;
}
.transition-example:hover {
background-color: #e06c75;
}
</style>
<div class="transition-example">
Passa il mouse qui
</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.