La propriété transition permet de définir en une déclaration l'ensemble des propriétés d'une transition :
- transition-delay (temps d'attente avant le début de la transition)
- transition-duration (durée de la transition)
- transition-property (liste des propriétés css impactées par la transition)
- transition-timing-function (modifie la vitesse de l'animation sur la durée de celle-ci)
Une transition implémente de façon animée le changement entre un état initial et un état final pour des propriétés css spécifiques
(la transition des anciennes aux nouvelles valeurs se faisant progressivement sur une durée paramétrable).
On utilise généralement des transformations (style css transform)
pour effectuer des transitions visuelles élaborées, mais il est également possible de se baser sur la taille ou la couleur des éléments par exemple.
La transition débute lorsqu'un évènement est déclenché. Il peut s'agir de pseudo-classes comme ":hover" (déclencheur le plus fréquent) ou
":active" ou bien d'un déclenchement par javascript.
Actuellement chaque navigateur se base sur sa propre version de la propriété transition :
- Chrome et safari utilisent la propriété "-webkit-transition"
- Firefox utilise la propriété "-moz-transition"
- Opera utilise la propriété "-o-transition"
- Internet Explorer n'implémente pas encore les transitions css
Propriété | Définition | Valeurs | CSS |
---|---|---|---|
transition | Permet de définir tous les paramètres d'une transition en une déclaration | CSS 3 | |
transition-delay | Détermine le délai à respecter avant de démarrer la transition (en secondes ou millisecondes) | durée : ##s ##ms |
CSS 3 |
transition-duration | Détermine la durée pour compléter la transition (en secondes ou millisecondes) | durée : ##s ##ms |
CSS 3 |
transition-property | Permet déclarer les styles css qui seront transformés durant la transition | styles css | CSS 3 |
transition-timing-function | Détermine la vitesse d'exécution de la transition sur ses différentes parties (début milieu fin) | cubic-bezier(val,val,val,val) ease ease-in ease-out ease-in-out linear |
CSS 3 |