CSS transition-property
La proprietà CSS3 transition-property specifica le proprietà da animare
La proprietà transition-property in CSS3 consente di definire quali proprietà CSS devono essere interessate dalla transizione. È possibile indicarne una o più, separate da virgole, oppure utilizzare all per animarle tutte.
Sintassi
Significato dei valori principali:
-
nome-proprietà: Una o più proprietà CSS da animare (es:
background-color,width,opacity, ecc.). -
all: (valore predefinito) tutte le proprietà CSS che cambiano verranno animate.
-
none: Nessuna proprietà verrà animata.
Esempio proprietà: transition-property
Codice Esempio: transition-property
.transition-property-example {
width: 200px;
height: 100px;
background-color: #56b6c2;
color: white;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition-property: background-color;
transition-duration: 0.5s;
}.transition-property-example:hover {
background-color: #d19a66;
width: 300px;
}
Contenuto Esempio: transition-property
Esempio di utilizzo di transition-property
In questo esempio, solo la proprietà background-color viene animata. La modifica della larghezza avviene senza transizione:
CSS e HTML per l'elemento con transition-property applicata:
<style>
.transition-property-example {
width: 200px;
height: 100px;
background-color: #56b6c2;
color: white;
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
transition-property: background-color;
transition-duration: 0.5s;
}
.transition-property-example:hover {
background-color: #d19a66;
width: 300px;
}
</style>
<div class="transition-property-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
