Appliquer du mouvement aux éléments HTML

Animer les objets avec les transitions

Nous avons vu dans un chapitre précédent l'animation par transition CSS. Il s'agit en fait de propriétés CSS qui permettent de changer progressivement les styles CSS d'un objet en passant d'un état à un autre, comme par exemple changer la taille, l'angle de rotation, la couleur... et tout ça, d'une manière progressive (interpolée).

Ces transitions sont souvent appliquées avec des pseudo-classes qui interprètent les différents états d'un objet.

Exemple:
Dans ce cas on verra passer l'objet HTML identifié par #objet de l'état normal à l'état survolé avec une transition qui dure une demi seconde. Si on quitte l'objet de la sourie, il retrouvera son état initial avec une transition de même durée.

Bien que les transitions on un rendu impressionnant, il restent tout de même appliquables entre deux états différents d'un objet et leur lancement se fait par l'intervention de l'utilisateur (comme le survol, le clic...).

Les animations proprement dites

Les animations en CSS consistent à un ensemble de propriétés qui permettent de décrire l'évolution d'un objet HTML dans le temps par le changement de ses propriété CSS. On aura donc des animations plus poussées que leur homologues en transitions. Mais ce n'est pas tout, car si les transitions permettent d'appliquer une animation entre deux états d'un objet, les animations quant à elles permettent de définir à tout instant l'attitude de l'objet. Plus encore, leur lancement ne demande pas forcément l'intervention de l'utilisateur et peuvent donc se lancer automatiquement et se répéter autant de fois que l'on souhaite.

Pour avoir une idée, l'illustration suivante représente une animation en CSS:

Personnaliser son animation

Vous vous êtes certainement rendu compte que l'on peut réussir des animations compliquées sans vraiment utiliser des langages de scripts comme Javascript. De simples déclarations CSS suffisent pour parvenir à ses fins.

Dans ce qui suit nous allons voir les différentes propriétés qui gèrent les animations afin que vous puissiez personnaliser celles ci à votre goût.

Appliquer une animation à un objet: animation-name

Pour qu'un objet HTML soit animé, il faut le doter de la propriété CSS animation-name. Cette propriété permet d'identifier la suite d'animations à lui appliquer parmi d'autres (s'il en existe sur la page courante).

Cette propriété (animation-name) accepte comme valeur un mot de votre choix. Si des animations différentes sont présentes sur la même page, alors il faut veiller à ce que la valeur de animation-name soit unique pour éviter tout conflit.

Exemple:

Définir la séquence d'animations à associer à un objet: @keyframes

Pour définir la séquence d'animation voulu, on aura recourt à une règle @ (dite règle at) (comme celles qu'on a vu pour @font-face, @media...). Cette règle s'appelle @keyframes et c'est elle qui contiendra les style de chaque cas (une sorte d'image clé pour les animations interpolées).

Le code suivant illustre la déclaration de @keyframes avec quelques styles-clés:
Expliquons ce code:

Comme nous avons doté l'élément #objet de la propriété animation-name:monanimation, alors il faut spécifier les différents styles-clés qui correspondent à ce nom là (monanimation), et c'est justement le rôle de @keyframes monanimation qui signifie que l'ensemble des styles-clés qui suivent seront appliqué à l'élément #objet.

La règle @keyframes renferme tous les styles-clés de l'objet spécifié avec animation-name et ces styles là il faut les déclarer tous entre deux accolades ouvrante et fermante {}.

Les styles-clés sont spécifiés avec des valeurs en pourcentage. Par exemple, si l'animation dure 2 secondes alors 0% signifie l'instant 0s, 50% signifie l'instant 1s et 100% signifie l'instant 2s.

Chaque valeur en pourcentage contient l'ensemble des styles-clés qui seront appliqués à l'instant approprié. Le changement de ces styles (entre un instant et l'instant suivant) se fait d'une manière progressive ce qui crée l'animation voulue.

Définir les propriétés de l'animation

Pour personnaliser une animation, il suffit de définir les styles voulues aux instants-clés. Cependant, il reste des choses qu'il faut renseigner au navigateur pour qu'il puisse jouer l'animation convenablement comme la durée, le répétition, le rythme entre séquences, l'ordre...

Durée de l'animation: animation-duration

Il s'agit de la durée total de l'animation entre l'instant 0% et l'instant 100%. Donc, on peut s'amuser à ajouter des styles-clés sans modifier la durée total de l'animation.

Pour définir la durée de l'animation (ainsi que toutes les propriétés qui vont suivre) on la déclare dans l'objet dans le même block de styles que animation-name.

Rythme entre séquences de l'animation: animation-timing-function

Comme pour les transitions, elle permet de changer la vitesse de l'animation entre deux séquences voisines (on parle de la courbe d'accélération). Les valeurs que cette propriété peut avoir sont:

• ease: le mouvement est rapide au début puis ralentit petit à petit jusqu'à l'arrêt complet.
• linear: le mouvement garde la même vitesse du début à la fin de la transition.
• ease-in: le mouvement commence lentement puis gagne en vitesse avec le temps.
• ease-out: le mouvement est rapide au début puis ralentit à la fin (le ralenti avec ease-out est moins senti qu'avec ease).
• ease-in-out: le mouvement commence lentement et fini lentement, mais il est plus rapide au milieu de la transition.

Délai avant démarrage de l'animation: animation-delay

Cette propriété définit la durée d'attente avant de lancer l'animation. Cette durée est calculée à partir de l'instant du chargement total du contenu de la page. Si elle n'est pas définie alors elle vaut par défaut 0s et l'animation commence instantanément.

Nombre de répétitions de l'animation: animation-iteration-count
La propriété animation-iteration-count définit le nombre de fois que l'animation sera jouée. Par défaut elle vaut 1 et l'animation se joue donc une seule fois puis s'arrête. Si on veut que l'animation tourne à l'infinie alors on applique la valeur infinite.

Sens de l'animation: animation-direction

La propriété animation-direction permet de définir le sens du mouvement. Elle peut accueillir les valeurs suivante:

• normal: (valeur par défaut) l'animation sera jouée dans le sens normal de l'instant 0% à 100%
• reverse: l'animation sera jouée dans le sens inverse, donc de 100% à 0%
• alternate: l'animation sera jouée dans les deux sens, de 0% à 100% puis de 100% à 0% de manière consécutive.

Exemple

Les animations avec CSS en vidéo