CSS3 Transitions consente al browser di animare elementi HTML attraverso il cambiamento delle proprietà CSS. In altre parole, siamo in grado di creare animazioni in una pagina web senza JavaScript, ma solo con puro CSS.
CSS3 Transition supporta quattro diverse proprietà, quali il nome della proprietà, la durata, allentamento e delay.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
div { transition-property: width; transition-duration: 1s; transition-timing-function: ease; transition-delay: 1s; /* Firefox 4 */ -moz-transition-property: width; -moz-transition-duration: 1s; -moz-transition-timing-function: ease; -moz-transition-delay: 1s; /* Safari and Chrome */ -webkit-transition-property: width; -webkit-transition-duration: 1s; -webkit-transition-timing-function: ease; -webkit-transition-delay: 1s; } |
In ogni caso, è possibile raggruppare tutte le 4 proprietà di transizione CSS3:
|
1 2 3 4 5 6 7 8 |
div { transition: width 1s ease 1s; /* Firefox 4 */ -moz-transition:width 1s ease 1s; /* Safari and Chrome */ -webkit-transition:width 1s ease 1s; } |
Sito Web | Autore Demo Download
pixolo ads
| Articolo pubblicato 6 anni fa nella categoria 
