Les animations CSS3

css3-webdesign-lien-web

Apparues avec la dernière version de CSS, les animations se démarquent par leur facilité de mise en oeuvre par rapport aux autres technologies possibles (JavaScript, Flash…). Elles demandent également moins de performances aux navigateurs (ce qui augmente leur fluidité).

Leur seul désavantage (outre que leurs possibilités restent limitées) est leur degré de compatibilité avec Internet Explorer : seule la version 10 les supporte. Pour les autres navigateurs, l’utilisation d’un prefix permet d’utiliser les animations pour Chrome et Safari dès leur version 4 et pour Firefox dès sa version 5.

Nous allons nous baser sur un cas classique : un menu de navigation animé dont voici le code HTML :
code_css_menu

Le principe
Ecrire une animation en CSS s’effectue en deux étapes :
1) Décrire les styles spécifiques à cette animation (modification de couleurs, de dimensions…) : cela se fait avec la règle CSS @keyframe
2) Donner les caractéristiques générales de l’animation (durée, cycle ou non…) : cela se fait avec la propriété animation (qui possède plusieurs propriétés dérivées)

En détail
1) Il existe plusieurs manières de décrire les styles successifs qui seront appliqués lors de l’animation :

  • S’il s’agit simplement d’indiquer un état de départ et un état d’arrivée, la syntaxe from {…} to {…} suffira :

animation_base

L’exemple en action : http://jsfiddle.net/bolero/me1u7pyd/

  • Si l’animation est décrite par plus de deux étapes, on va subdiviser la temporalité de l’animation en pourcentages. Dans ce cas de figure, from correspondra à une avancée de l’animation de 0% et to une avancée de 100%. L’avantage de cette écriture est qu’elle permet d’introduire des étapes intermédiaires :

animation_base_2
L’exemple en action : http://jsfiddle.net/bolero/apa79uu9/1/

Remarque : Nous avons surtout utilisé en exemple la propriété background, mais nous pouvons jouer sur la plupart des propriétés CSS afin d’effectuer des agrandissements, des translations (exemple : http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3), des rotations…

2) Il existe de nombreuses propriétés pour définir les caractéristiques générales de l’animation.

Voici le code minimal pour déclarer une animation (il donne le nom de l’animation et sa durée) :
animation_prop

Le code ci-dessus fait appel aux propriétés dérivées animation-duration et animation-name rassemblées dans la super-propriété animation.
L’exemple en action : http://jsfiddle.net/bolero/me1u7pyd/

-D’autres propriétés intéressantes sont disponibles :

  • animation-delay : permet de retarder le déclenchement de l’animation
  • animation-direction : permet d’effectuer l’animation dans le sens inverse (avec la valeur alternate,elle sera jouée une fois normalement, puis l’élément reviendra à son état initial en repassant par les différentes étapes de l’animations)
  • animation-play-state : permet de mettre en pause ou de reprendre une animation (utile combiné avec du JS, qui sait aussi détecter des événements sur les animations)
  • animation-iteration-count : permet de jouer l’animation un certain nombre de fois

L’exemple en action : http://jsfiddle.net/bolero/apa79uu9/3/

Pour notre exemple de menu dynamique, notons qu’il existe une solution CSS3 plus simple que les animations (sauf si on veut avoir plus que deux états) : les transitions.
Celles-ci se déclenchent lorsque un élément subit un changement de style (par exemple lors de l’utilisation d’un pseudo-format, comme :hover). Il faut simplement préciser quelle(s) propriété(s) CSS doit faire l’objet d’un changement de style progressif, et la durée de la transition :
animation_transition

Exemple : http://jsfiddle.net/bolero/apa79uu9/4/

Exemple avec plusieurs effets simultanés : http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition2

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.