Les animations en CSS 3

Ayant eu du mal à trouver des informations claires à ce sujet, j’ai décidé de faire un article sur la création des Animations en CSS3 via la propriété transition.

Les animations CSS3 ont été crées afin de réduire l’utilisation du javascript dans les pages webs pour animer les éléments HTML. Leur fonctionnement est, somme toute, assez simple (pour peu qu’on vous l’explique clairement :))

Le principe est le suivant:

Pour animer un élément HTML, vous devez d’abord lui attribuer une règle de base

Nous prendrons pour l’exemple une width de 200px sur une div qui aura l’identifiant #css3-animation.

Il faudra ensuite déclarer l’animation que l’on souhaite utiliser avec la propriété « transition »

Cette propriété prend comme valeurs:

• Le nom de la propriété css que vous voulez faire varier (ici: width)
• Le temps que l’animation prendra pour passer de la valeur de base à la valeur finale

On obtient donc le code suivant pour la div #css3-animation.

div#css3-animation { width: 100px; transition: width 2s; }

Pour finir, il faudra lancer l’animation lors d’un événement déclencheur

Les évènements déclencheur disponibles sont au nombre de 3

• :hover -> déclenchement au survol de l’élément HTML par le curseur de la souris
• :focus -> déclenchement à l’obtention du focus (soit par clic soit via la touche tab du clavier par exemple)
• :active -> déclenchement sur un clic long (pour simplifier)

Voici donc le code qu’il faudra écrire pour lancer l’animation sur un :hover par exemple:

div#css3-animation:hover { width: 200px; }

Et c’est tout!

Le fait d’attribuer une nouvelle valeur à la propriété width sur l’évenement :hover déclenchera le lancement de l’animation qui a été définie pour cette élément HTML.

Notre div devrait donc passer de 200px à 300px au survol par la souris