Des animations en css inspirantes pour les intégrateurs

Le 11/04/2013

Dans Webdesign

Découvrez sur le Blog du Webdesign 10 animations CSS3 sans javascript !

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).

Une animation en forme de diaphragme

Animation en forme diaphragme

Cet animal anime n’est en fait qu’un seul element !

Animal anime un seul element

Ce petit mouton s’anime au passage de la souris

Animation petit mouton passage souris

Un effet de loading en un seul element

Effet loading un seul element

Cliquez sur une fleche pour l’animation (le Javascript ne sert qu’à détecter le clic)

Animation cliquer fleche

Ces cartes mettent en avant un très joli travail sur les z-index

Mise en avant carte z index

Transition de pages en CSS3

Transition pages css

Ce graphe animé vous montrera bien le système de keyframe

Keyframe graphe anime