Explication du code CSS3 de transitions.
Les propriétés CSS de transitions sont apparues avec CSS3, elles permettent d'effectuer une interpolation entre deux états d'une propriété CSS d'un élément HTML.
Les propriétés CSS de transition ne sont pas reconnues par tous les navigateurs, il est nécessaire de compléter le code CSS des différentes propriétés de transitions par des propriétés CSS propriétaires pour certains navigateurs :
- -webkit-transition-property, -webkit-transition-duration , -webkit-transition-delay , -webkit-transition-timing-function pour Safari 3.1+ et Chrome 1+ à < 26
- -moz-transition-property, -moz-transition-duration , -moz-transition-delay , -moz-transition-timing-function pour Firefox 4+ à < 16.
- -o-transition-property, -o-transition-duration , -o-transition-delay , -o-transition-timing-function pour Opera 10.5+ à < 12.10
La liste des propriétés CSS qui acceptent la transition est celle du w3c. Cependant, chaque navigateur accepte d'autres propriétés CSS.
Vous pouvez pour plus d'information sur les transitions consulter le cours sur les transitions CSS3 et entre autre les façons de déclacher une transition.
Les problèmes possibles.
Il est possible que la transition ne fonctionne pas pour les propriétés CSS :
- text-shadow, opacity sous certains navigateurs qui ne les reconnaissent pas.
Définition rapide des propriétés de transformation CSS3.
Quatre propriétés CSS3 sont utilisées pour faire des transitions css. Les propriétés de transitions se mettent toujours dans le sélecteur qui contient les propriétés css de fin de transition.
transition-property
La propriété css transition-property permet de définir la ou les propriétes CSS qui seront prises dans la transition.transition-property: border-bottom-color, border-bottom-width;
transition-duration
La propriété CSS transition-duration permet de définir la ou les durées CSS de la transition de chaque propriété css qui sera prise dans la transition. Vous devez avoir autant de durées que de propriétés déclarées dans transition-property. Sauf si les durées sont identiques, dans ce cas on ne met qu'une seule valeur.transition-duration:2s; /* identique à */ transition-duration: 2s, 2s;
transition-delay
La propriété CSS transition-delay permet de définir le ou les temps de latence avant le déclanchement de chaque transition. Si aucune de vos transitions n'ont de delais, alors vous pouvez omettre cette propriété CSS de transition. Dans le cas contraire, vous devez avoir autant de délais que de propriétés déclarées dans transition-property. Sauf si les délais sont identiques, dans ce cas, on ne met qu'une seule valeur.transition-delay:1s; /* identique à */ transition-delay: 1s, 1s;
transition-timing-function
La propriété CSS transition-timing-function permet de définir la manière dont progresse la transition entre deux états d'une propriété CSS. Si toutes vos progressions sont de type ease , alors vous pouvez omettre cette propriété CSS de transition. Dans le cas contraire, vous devez avoir autant de types de progression que de propriétés déclarées dans transition-property. Sauf si les types de progression sont identiques, dans ce cas, on ne met qu'une seule valeur.transition-timing-function:ease-in-out; /* identique à */ transition-timing-function: ease-in-out, ease-in-out;
Pour la transition de type cubic-bezier, il est possible de mettre des valeurs négative et supérieur à 1 pour le deuxième et quatrième champ. Cependant un bug Safari ne le permet pas, Safari n'accepte que des valeurs comprises entre 0 et 1.
Compatibilité du code CSS avec les navigateurs.
Je tiens compte des propriétés préfixées (-moz-, -webkit-, -o-, -ms-), pour voir les compatibilés des propriétés de transition préfixées et propriétés de transition non préfixées voir le cours sur les transitions.
Ces compatibilités navigateurs ne prennent en compte que les propriétés CSS3 de transition.
Détecter en Javascript.
Il est possible en Javascript de détecter quand la propriété transition (et/ou version préfixée) n'est pas prise en compte par le navigateur. Le script est disponible ici