CSS transition-duration
La proprietà CSS3 transition-duration definisce la durata di una transizione
La proprietà transition-duration in CSS3 consente di stabilire quanto deve durare la transizione di una proprietà. Più il valore è alto, più lenta sarà l’animazione. Può essere espresso in secondi (s) o millisecondi (ms).
Sintassi
Significato dei valori principali:
-
time: Specifica la durata della transizione. Può essere un valore in secondi (
s) o millisecondi (ms), ad esempio1s,0.3s,200ms, ecc.
Esempio proprietà: transition-duration
Codice Esempio: transition-duration
.transition-duration-example {
width: 300px;
height: 150px;
background-color: #e5c07b;
color: black;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition-property: background-color;
transition-duration: 2s;
}.transition-duration-example:hover {
background-color: #61afef;
}
Contenuto Esempio: transition-duration
Esempio di utilizzo di transition-duration
In questo esempio, l'elemento cambia il colore di sfondo con una transizione della durata di 2 secondi quando ci si passa sopra con il mouse:
CSS e HTML per l'elemento con transition-duration applicata:
<style>
.transition-duration-example {
width: 300px;
height: 150px;
background-color: #e5c07b;
color: black;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition-property: background-color;
transition-duration: 2s;
}
.transition-duration-example:hover {
background-color: #61afef;
}
</style>
<div class="transition-duration-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
