Les animations et transitions CSS3
Qu’on se le dise, il n’est plus obligatoire d’utiliser du Javascript pour avoir de jolies animations sur son site ! Le CSS3 fournit deux outils vraiment très bien : les transitions et les animations.
Les Transitions ne sont ni plus ni moins qu’un moyen de répartir le changement d’une propriété (par exemple un changement de couleur de texte au survol) dans le temps, pour donner un effet d’apparition, par exemple.
Les animations sont bien plus que ça: Il est possible grace à elles de définir des images clés, et les transitions qui doivent être appliquées pour passer d’une image a l’autre ! Il devient donc possible de créer des animations très complexes comme une intro de site uniquement en CSS par exemple.
Attention, ces deux propriétés ne sont pas supportés par internet explorer 9 et inférieur. Néanmoins, une transition brutale entre deux effets (basiquement la même chose que sans la transition) et une image fixe au lieu d’animées sont des dégradations très acceptables dans la grande majorité des cas.
Pour illustrer ce que l’on peut faire avec tout ça, découvrez 8 animations ne contenant pas de Javascript (ou alors n’utilisant le Javascript que pour des taches annexes, comme détecter un clic).