CSS transition-timing-function
La proprietà CSS3 transition-timing-function definisce la curva di velocità della transizione
La proprietà transition-timing-function in CSS3 consente di personalizzare la velocità di avanzamento di una transizione tramite curve predefinite o personalizzate con cubic-bezier(). Ciò permette di creare effetti più naturali o dinamici.
Sintassi
Significato dei valori principali:
ease: velocità iniziale lenta, accelera e rallenta alla fine (valore predefinito).
linear: velocità costante dall'inizio alla fine.
ease-in: inizio lento e accelerazione verso la fine.
ease-out: inizio veloce e rallentamento finale.
ease-in-out: inizio e fine lenti, velocità maggiore a metà transizione.
cubic-bezier(n,n,n,n): definizione personalizzata della curva con quattro valori numerici da 0 a 1.
step-start e step-end: transizioni a passi, saltano all'inizio o alla fine.
Esempio proprietà: transition-timing-function
Codice Esempio: transition-timing-function
.transition-timing-function-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-property: background-color;
transition-duration: 1.5s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}.transition-timing-function-example:hover {
background-color: #e06c75;
}
Contenuto Esempio: transition-timing-function
Esempio di utilizzo di transition-timing-function
Qui l'animazione cambia il colore di sfondo usando diverse curve di velocità al passaggio del mouse:
CSS e HTML per l'elemento con transition-timing-function applicata:
<style>
.transition-timing-function-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-property: background-color;
transition-duration: 1.5s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.transition-timing-function-example:hover {
background-color: #e06c75;
}
</style>
<div class="transition-timing-function-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.118
