Les animations CSS

Les animations CSS peuvent êtres réalisées selon 2 méthodes relatives au besoin de l’interface :

• Les transition, qui seront effectuées lors d’un changement d’état de l’élément (au survol par exemple) et se limiterons à deux étapes (le début et la fin).
• Les animations définies par étapes multiples ou images clés (keyframes), qui pourront être programmées en amont sous la forme d’une séquence puis déclenchées avec ou sans action de l’internaute.

Les transitions

Les transitions CSS permettent de contrôler la vitesse d’animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut lui ajouter une notion de temporisation défini en seconde (s) ou mili-seconde (ms). Si nous souhaitons passer d’une couleur d’arrière plan à une autre par exemple, nous pourrons utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d’accélération donnée.

Nous pourrons temporiser plusieurs changement de propriétés en même temps. De façon générale, seul les propriétés définies à l’aide de valeurs numériques seront utilisables.

Les propriétés CSS de transition

transition-property
Cette propriété définit le nom des propriétés CSS pour lesquelles on veut appliquer des transitions. Seules les propriétés listées ici seront sujettes aux transitions. Les modifications appliquées aux autres propriétés seront instantanées.

transition-property : background-color;

transition-duration
Cette propriété définit la durée de la transition. On peut définir une durée pour toutes les transitions ou une durée pour chacune des propriétés. Elle sera définie en secondes (s) ou mili-secondes (ms)

transition-duration : 0.5s;

transition-timing-function
Définit une fonction qui décrit la façon dont les valeurs intermédiaires sont calculées. On utilise pour cela des fonctions de temporisation.

transition-timing-function : ease-in;

transition-delay
Cette propriété indique le délais à attendre avant le moment où la propriété est modifiée et le début de la transition. Elle sera définie en secondes (s) ou mili-secondes (ms).

transition-delay : 200ms;

La syntaxe de CSS de transition

Comme pour de nombreuses règles CSS, il sera possible de raccourcir l’écriture des différentes propriétés en une seule. Ainsi nous pourrons définir la ou les règles à temporiser, la durée, la fonction et le délais en une seule ligne :

transition : <property> <duration> <timing-function> <delay>;

Dans l’exemple suivant, nous allons définir une transition appliquée sur l’ensemble des règles CSS modifiées au survol, sur une durée de 400 mili-secondes, de façon linéaire et avec un délai de 200 mili-secondes

li a{
  background-color: blue;
  padding : 0.5em 0.5em;
}

li a:hover{
  background-color: red;
  padding : 0.5em 1em;
  transition : all 400ms linear 200ms;
}

Dans le cas décrit ci-dessus, l’animation ne sera effectuée que lors du survol de notre élément. Le retour à l’état initial ne sera pas défini. Il sera donc nécessaire de préciser la transition souhaité lors de la déclaration de l’état initial. Nous pourrons donc décider de revenir à l’état initial sans appliquer de délais ni de fonction en 600 mili-secondes :

li a{
  background-color: blue;
  padding : 0.5em 0.5em;
  transition : all 600ms;
}

li a:hover{
  background-color: red;
  padding : 0.5em 1em;
  transition : all 400ms linear 200ms;
}

Temporiser plusieurs propriétés

Il sera également possible de gérer une temporisation différente pour chaque règle à modifier en précisant les valeurs choisies pour chacune d’elles.

Continuons avec l’exemple précédent. Nous allons maintenant appliquer un effet de transition différent pour la couleur et le padding au moment du survol. L’animation sur le padding sera plus rapide mais déclenché 200 mili-seconde après le début de changement de couleur d’arrière-plan :

li a:hover{
  background-color: red;
  padding : 0.5em 1em;
  transition : background-color 400ms linear 0ms, padding 200ms linear 300ms;
}

---

Les animations par images-clés

Jusqu’ici, nous avons défini une animation simple basé sur une transition entre deux états d’un élément et uniquement déclanché par l’action d’un internaute.

Il existe un autre mode de création d’animation permettant de créer des animations plus complexes en s’appuyant sur un principe d’images-clés. Plus « complexe », ne veut pas nécessairement dire « compliqué » mais permettant de jouer sur différentes étapes et dont le déclenchement pourra être défini sans une interaction nécessaire de l’internaute sur l’interface. Le fonctionnement n’est pas très éloigné des transitions vues précédemment mais offre une plus grande souplesse.

Créer une séquence

Le principe d’une animation repose essentiellement sur la création d’une « fonction » ou d’une « séquence » programmée sur 2 ou plusieurs images clés. Cette séquence sera crée à l’aide de la règle @keyframes comme dans l’exemple suivant :

@keyframes change_my_color{
   0%{ background-color: red;}
   25%{ background-color: yellow;}
   50%{ background-color: green;}
   75%{ background-color: blue;}
   100%{ background-color: red;}
}

Nous venons de créer une « séquence » dont le nom est change_my_color. Cette séquence est composée de 5 images-clés réparties respectivement à un certain pourcentage du temps de notre animation :

• La première, à 0% du temps, définie la couleur d’arrière plan en rouge
• La seconde, à 25% du temps, définie la couleur d’arrière plan en jaune
• La troisième, à 50% du temps, définie la couleur d’arrière plan en vert
• La quatrième, à 75% du temps, définie la couleur d’arrière plan en bleu
• La cinquième, à 100% du temps, définie la couleur d’arrière plan en rouge

Cette séquence pourra être écrite n’importe où dans notre feuille de style CSS. De façon générale, nous prendrons l’habitude de les déclarer (écrire) soit au début de notre feuille de style, soit avant son appel.

Déclencher la séquence

Une fois notre séquence crée, nous allons pouvoir l’appliquer à n’importe quel élément de notre page et choisir différents comportements qu’elle devra prendre.

Nous allons donc appliquer la séquence précédemment écrite à l’arrière plan de notre site (le <body>) et le jouer sur une durée de 5 secondes :

body{
  background-color:grey;
  animation-name : change_my_color;
  animation-duration : 5s;
}

Cette séquence sera jouée une seule fois au chargement de la page. Mais il est tout a fait possible, comme pour les transitions, de préciser plusieurs autres paramètres. Nous pourrons ainsi manipuler le nombre de fois qu’elle sera jouée, le sens de lecture des images-clés, l’état a prendre en fin d’animation, la fonction de temporisation…

Les propriétés d’une animation

animation-delay
Cette propriété définit le délai entre le moment où l’élément est chargé et le moment où l’animation commence. Elle sera définie en secondes (s) ou mili-secondes (ms).

animation-direction
Cette propriété indique si l’animation doit alterner entre deux directions de progressions (faire des allers-retours avec la valeur alternate) ou recommencer au début à chaque cycle de répétition.

animation-duration
Cette propriété définit la durée d’un cycle de l’animation. Elle sera définie en secondes (s) ou mili-secondes (ms)

animation-fill-mode
Cette propriété indique les valeurs qui doivent être appliquées aux propriétés avant et après l’exécution de l’animation. La valeur none est celle par défaut, l’objet prendra la valeur qui lui a été définie dans sa règle css, forwards gardera le dernier état défini dans la séquence, backwards gardera le premier état de la séquence et enfin both gardera l’état dans lequel sera l’animation au moment de sa fin et prendra en compte l’alternance évenuellement choisi par animation-direction.

animation-iteration-count
Cette propriété détermine le nombre de fois que l’animation est répétée. On peut utiliser le mot-clé infinite afin de répéter une animation infiniment.

animation-name
Cette propriété permet de déclarer un nom qui pourra être utilisé comme référence à l’animation pour la règle @keyframes.

animation-play-state
Cette propriété permet d’interrompre ( pause ) ou de reprendre ( play ) l’exécution d’une animation.

animation-timing-function
Cette propriété configure la fonction de minutage d’une animation, autrement dit comment celle-ci accélère entre l’état initial et l’état final notamment grâce à des fonctions décrivant des courbes d’accélération, autrement dit, les fonctions de temporisations évoquées plus haut.

Nous allons donc pouvoir préciser le comportement pour l’exemple précédent. Toujours sur notre élément body, nous allons choisir de déclencher notre animation nommée change_my_color au chargement de la page, la jouer sur une durée de 5 secondes, 3 fois, avec un mode de lecture alternant entre la montée (de 0% à 100%) puis en descendant (de 100% à 0%) avec une courbe d’accélération linéaire et enfin un arrêt sur le dernier état joué et non sa valeur définie à background-color:grey; .

body{
  background-color:grey;
  animation-name : change_my_color;
  animation-duration : 5s;
  animation-iteration-count : 3;
  animation-direction : alternate;
  animation-timing-function : linear;
  animation-fill-mode : both;
}

Comme pour les transition, nous pourrons utiliser une écriture raccourcie pour définir l’ensemble des propriété ou déclancher plusieurs animations en même temps. Il peut également être intéressant de choisir les règles d’animation en remplacement des transition pour pouvoir manipuler des animations plus complexes.

Nous allons, dans l’exemple suivant, déclencher 2 fois notre animation change_my_color sur un élément <a> lorsque celui-ci sera survolé par le curseur de l’internaute pendant une durée de 1 seconde, en utilisant une écriture raccourcie et en laissant son arrière plan se remettre a la valeur initiale une fois l’animation terminée.

li a{ 
   background:grey;
   padding:0.5em;
}

li a:hover{
  background:pink;
  animation : 1s 2 alternate change_my_color; 
}

---

En conclusion

Il ne vous reste plus qu’à expérimenter et explorer l’ensemble des possibilités offertes par ces deux procédés d’animation. De nombreuses ressources et articles d’inspirations existent sur le net pour que vous puissiez enrichir vos interfaces. Attention cependant à ne pas vous laisser embarquer par une surcharge d’animations qui finirons par ralentir vos sites et pourront nuire à la lecture de vos pages. Trop d’animation, tue l’information.