Le BlogDuWebdesign boost l’inspiration des intégrateurs #4

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

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

Ce petit mouton s’anime au passage de la souris

Un effet de loading en un seul element

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

Cette animation star wars est un vrai cas d’école

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

Transition de pages en CSS3

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

Cette animation vous montrera ce que l’on peut faire en peu de temps avec une library en CSS. (oui, une lib en CSS!)