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