Les transitions CSS3
Historique des transitions
Anciennement pour faire des changements d'états progressifs d'une propriété CSS, nous devions passer par le Javascript.
Depuis CSS3, le changement d'état progressif d'une propriété CSS peut se faire entièrement en CSS.
Seule condition, que la valeur de la propriété CSS sur laquelle on veut appliquer la transition soit de type :
- couleur,
- nombre, seul ou suivit d'une unité em, px, deg, %, etc...
Les propriétés CSS3 de transition
Quatre propriétés CSS 3
En CSS3, quatre propriétés sont utilisées pour les transitions :
-
transition-property, spécifie les propriétés qui doivent subir la transition Css. -
transition-duration, spécifie la durée de la transition Css. -
transition-delay, spécifie le temps de pause avant le début de la transition Css. -
transition-timing-function, spécifie le type de la transition Css.
Le problème des transitions, c'est que les navigateurs ne prennent pas tous en charge les propriétés de déclarations des transitions CSS3, il faut généralement utiliser en plus les propriétés préfixées pour avoir une compatibilité maximale.