Dossier Développer une animation en CSS3

Déplacement, rotation... Pas à pas, voici comment créer quelques animations web. Des bonnes feuilles de l?ouvrage "HTML5 et CSS3 Faites évoluer le design de vos sites web"

 La construction d'une animation

Les animations se déroulent dans le temps. Le temps est géré par les "images-clés", les keyframes en anglais. Une image-clé, une keyframe est une étape dans une animation où l'élément animé opère un changement.

C'est la règle @keyframes qui gère les étapes de votre animation. Chaque animation doit avoir une règle @keyframes nommée.

Vous devrez déterminer les différentes étapes de votre animation et y indiquer les changements à apporter aux différentes propriétés. Chaque étape pourra être identifiée avec une valeur de pourcentage, 100% étant la durée totale de l'animation.

Vous allez pouvoir indiquer combien de temps doit durer l'animation avec la propriété animation-duration.

La cinétique de l'animation est gérée par la propriété animation-timing function. Vous pourrez avoir des accélérations et des ralentissements à l'identique de ce que nous avons vu pour les transitions.

Ensuite, vous pourrez indiquer combien de fois doit se répéter cette animation. C'est la notion d'itération. C'est la propriété animation-iteration-count qui va permettre de l'indiquer.

La propriété animation-delay indique si l'animation doit commencer avec un délai et non pas immédiatement.

La propriété animation-direction vous permet d'indiquer si l'animation doit se jouer dans le sens inverse.

La propriété animation-play-state indique si l'animation est jouée ou si elle est interrompue.

Vous pouvez utiliser la syntaxe courte animation en indiquant dans l'ordre :

 animation-name

 animation-duration

 animation-timing-function

 animation-delay

 animation-iteration-count

 animation-direction.

Notez bien qu'il faut évidemment utiliser les préfixes propriétaires des navigateurs.