La notation raccourcie transition
Tout comme pour d'autres propriétés CSS, il existe une notation raccourcie pour déclarer les transitions. Cette notation permet de décrire facilement et de manière concise les différentes propriétés en jeu à l'aide d'une seule propriété. La syntaxe est la suivante :
selecteur {
transition:
<transition-property>
<transition-duration>
<transition-timing-function>
<transition-delay>;
}
Comme précédemment, il est possible de préciser plusieurs transitions à l'aide de la propriété en séparant les déclarations par des virgules. Par exemple :
selecteur {
transition: width 2s ease, height 3s linear;
}
Conclusion
Au travers de cet article, nous avons appris les bases des transitions CSS. Ces transitions permettent d'obtenir un changement progressif entre deux valeurs lorsque ces dernières sont modifiées.
Ces nouvelles possibilités offertes par CSS posent la question de la répartition des rôles pour chaque langage au sein d'un document web : les trois entités Structure, Mise en forme et Comportement étaient jusque là gérées - avec leurs limites - respectivement par (X)HTML, CSS et JavaScript. A présent que les feuilles de style permettent d'animer les éléments de la page, la limite avec JavaScript se fait plus ténue pour tout ce qui a trait au domaine visuel.
Tutoriel originel d'Antoine Cailliau, remanié par Raphaël Goetter et dew.