Créer des animations en CSS

Les animations vont, comme les transitions, nous nous permettre de modifier la valeur d’une propriété progressivement mais en utilisant cette fois-ci des keyframes.

Nous allons pouvoir gérer le comportement des animations en CSS en définissant la durée d’animation, le nombre de répétition et le comportement de répétition.

De manière similaire aux transitions, toutes les propriétés ne vont pas pouvoir être animées. Cependant, la grande majorité des propriétés courantes vont pouvoir l’être.

Pour définir une animation en CSS nous allons pouvoir utiliser les propriétés de type animation-* ou la notation raccourcie animation avec une règle @keyframes qui va contenir les propriétés à animer et leurs valeurs.

 

Différence entre animations et transitions en CSS

Les transitions et les animations permettent toutes les deux de modifier la valeur de propriétés de manière progressive, au cours du temps. Cependant, la façon dont vont procéder les transitions et les animations pour arriver à cela ne va pas être la même.

La grande différence entre les transitions et les animations en CSS est que les animations nous laissent à la fois une plus grande liberté et un plus grand contrôle sur le déclenchement et la progression du changement de valeur des propriétés animées.

En effet, dans le cas d’une transition, nous ne pouvons que préciser une valeur de départ et une valeur d’arrivée pour les propriétés pour lesquelles nous souhaitons créer notre transition et n’avons pas véritablement de contrôle précis sur la transition en soi tandis que dans le cas d’une animation nous allons pouvoir indiquer de manière explicite comment la « transition » entre les différentes valeurs doit se passer et pouvoir préciser différentes valeurs intermédiaires.

En cela, les animations offrent davantage de contrôle sur le changement de valeurs des propriétés concernées par l’animation puisqu’on va pouvoir contrôler ce changement de valeur dans son ensemble. Elles vont donc notre choix de prédilection lorsqu’on voudra créer des effets plus complexes ou précis.

De plus, nous n’allons plus devoir attendre un changement d’état d’un élément pour modifier la valeur d’une de ses propriétés avec les animations. En effet, nous allons pouvoir lancer une animation dès le chargement de la page ou selon un autre évènement.

 

La règle CSS @keyframes

La règle @keyframes va nous permettre d’indiquer quelles propriétés doivent être animées et comment elles doivent l’être. Nous allons pouvoir dans notre règle @keyframes préciser différentes valeurs auxquelles les propriétés animées doivent parvenir à certains stades de l’animation.

La règle @keyframes va donc nous permettre de définir différents stades ou étapes pour notre animation et c’est ce qui va nous permettre d’avoir un contrôle total sur la progression de l’animation.

Nous allons toujours devoir donner un nom à une règle @keyframes qu’on va ensuite réutiliser dans notre animation pour lui indiquer les propriétés à animer et comment les animer. Dans notre règle @keyframes, nous allons tout simplement renseigner les propriétés à animer et les différentes valeurs qu’elles doivent atteindre à certains moments de l’animation.

Je vous rappelle ici que pour créer une animation fonctionnelle en CSS, nous allons d’une part devoir définir notre règle @keyframes et d’autre part utiliser les propriétés de type animation-* ou la notation raccourcie animation pour définir les caractéristiques propres à notre animation (nom, durée, etc.).

Regardez plutôt l’exemple suivant pour bien comprendre (l’animation va se lancer immédiatement, n’hésitez pas à la relancer en cliquant sur « rerun » en bas à droite de la boite de code pour bien la voir) :

See the Pen Cours HTML CSS 12.2.1 by Pierre (@pierregiraud) on CodePen.

Ici, vous pouvez déjà remarquer une différence intéressante entre les animations et les transitions : une fois l’animation terminée, les propriétés animées retrouvent immédiatement leur valeur « normale ».

Regardons maintenant en détail notre règle @keyframes. Ici, on lui donne le nom couleur et on précise dedans les propriétés qui vont être animées (en l’occurrence la propriété background-color).

Plus précisément, on indique ici la valeur de départ pour notre ou nos propriété(s) que l’on souhaite animer à l’intérieur d’un bloc from{} qui signifie « à partir de » et la valeur d’arrivée pour notre ou nos propriété(s) que l’on souhaite animer à l’intérieur d’un bloc to{} qui signifie « vers ».

A ce niveau, il y a une chose que vous devez bien comprendre : la valeur que l’on précise dans le bloc from{} est bien la valeur de départ de l’animation, c’est-à-dire la valeur avec laquelle la propriété doit démarrer son animation et non pas sa valeur « normale » c’est-à-dire sa valeur en dehors du temps de l’animation (avant le lancement de l’animation et après sa fin).

C’est pour cela que j’ai également précisé une couleur de fond en dehors de ma règle @keyframes afin de préciser la valeur que doit avoir ma propriété lorsqu’elle n’est pas animée.

Une fois notre règle @keyframes définie, nous allons devoir la lier ou l’attribuer à une animation. Pour cela, nous allons également devoir déclarer une animation et définir son comportement.

C’est ce que j’ai fait ici en déclarant deux propriétés deux propriétés animation-name à laquelle j’ai passé notre règle @keyframes et animation-duration qui me permet de définir la durée de l’animation. Par défaut, l’animation ne va s’exécuter qu’une fois.

Dans l’exemple précédent, utiliser une animation n’a aucun intérêt par rapport à une simple transition car cette animation est très simple. Cependant, rappelez-vous qu’un des grands avantages des animations par rapport aux transitions est qu’on va pouvoir dans notre règle @keyframes préciser différentes valeurs que nos propriétés devront atteindre à un moment choisi de l’animation.

On va ainsi entre autres très facilement pouvoir créer une boucle sur les valeurs d’une propriété pendant une animation comme dans l’exemple suivant :

See the Pen Cours HTML CSS 12.2.2 by Pierre (@pierregiraud) on CodePen.

Ici, en plus de mes mots clefs from et to, j’ai indiqué des pourcentages dans ma règle @keyframes. Ces pourcentages correspondent à l’état d’avancement de l’animation. 50% marque donc le milieu de l’animation, c’est-à-dire au bout de 5 secondes pour une animation qui doit durer 10 secondes ; 25% correspond à 25% du temps total de l’animation, soit 2,5 secondes pour une animation de 10 secondes et etc. Ensuite, on indique la valeur que doit avoir notre propriété animée pour chaque niveau d’avancement de l’animation défini.

Le grand avantage des animations encore une fois est que nous allons pouvoir définir autant d’étapes que l’on souhaite pour contrôler plus ou moins le l’avancement de notre animation plus. J’attribue ici la même valeur à ma propriété background-color au début et en fin d’animation pour donner l’impression que la couleur boucle sur elle-même.

Nous allons de plus pouvoir préciser plusieurs propriétés à animer d’un coup et leur attribuer différentes valeurs à différents moments de l’animation au sein d’une même règle @keyframes :

See the Pen Cours HTML CSS 12.2.3 by Pierre (@pierregiraud) on CodePen.

Maintenant que nous avons vu et compris le rôle de la règle @keyframes dans une animation, il est temps d’étudier les différentes propriétés animation-* qui vont nous permettre de gérer notre animation en soi avant de terminer avec la propriété raccourcie animation.

 

La propriété animation-name

La propriété animation-name va nous permettre de définir une liste d’animations qui doivent s’exécuter. On va donc lui passer un ou plusieurs noms qui devront correspondre aux noms des règles @keyframes qui définissent les propriétés à animer et les différentes valeurs qu’elle doit avoir pendant l’animation.

Si on fournit plusieurs noms à la propriété animation-name, alors il faudra définir à minima la durée de l’animation pour chaque animation avec la propriété animation-duration si on veut des animations fonctionnelles. Dans le cas où l’on fournit moins de valeurs à animation-duration qu’à animation-name, alors les animations supplémentaires vont réutiliser les valeurs de animation-duration dans l’ordre.

Par exemple, si on définit 5 animations avec animation-name et qu’on ne donne que 3 valeurs à animation-duration, alors la quatrième animation reprendra la première valeur de animation-duration et la cinquième animation reprendra sa deuxième valeur.

See the Pen Cours HTML CSS 12.2.4 by Pierre (@pierregiraud) on CodePen.

Dans l’exemple précédent, on définit 3 règles @keyframes qui définissent chacune des changements de valeurs pour une propriété. Dans le cas présent, on aurait aussi bien pu tout mettre dans une seule règle @keyframes. Cependant, il est généralement considéré comme une bonne pratique d’avoir une règle @keyframes pour une propriété puisque cela va nous permettre de nous resservir indépendamment d’une règle ou d’une autre pour l’appliquer à un élément ou à un autre.

Je passe ensuite les trois noms des animations que je souhaite exécuter à ma propriété animation-name. Ici, vous pouvez remarquer que je n’indique que deux valeurs de durée d’animation dans ma propriété animation-duration.

La première animation déclarée dans animation-name se servira de la première valeur, la deuxième de la deuxième valeur et la troisième à nouveau de la première valeur. L’animation « couleur » va donc durer 10 secondes, l’animation « essuieglace » va durer 2 secondes et l’animation « taille » va durer 10 secondes.

Notez également ici que lorsqu’on définit plusieurs animations comme cela, les animations vont par défaut toutes se lancer en même temps et non pas à la suite les unes des autres.

 

La propriété animation-duration

La propriété animation-duration nous permet de définir le temps que doit durer une animation. On doit préciser une durée en secondes.

See the Pen Cours HTML CSS 12.2.5 by Pierre (@pierregiraud) on CodePen.

Ici, on fournit la même règle @keyframes à chacun de nos trois div et on définit ensuite des paramètres d’animations différents à partir de cette règle en donnant des durées d’animation différentes. Une nouvelle fois, je vous rappelle qu’une règle @keyframes n’est qu’un cadre qui sert qu’à définir différentes valeurs pour une propriété à différents stades d’une animation quelconque.

Ensuite, n’importe quelle animation (qui va être construite et déclarée à proprement parler par les différentes propriétés animation-*) va pouvoir se resservir de cette règle @keyframes. C’est la raison pour laquelle je peux ici utiliser ma règle @keyframes dans trois animations pour trois éléments différents.

 

La propriété animation-timing-function

La propriété animation-timing-function va nous permettre comment doit progresser l’animation entre les différentes valeurs de keyframes : la progression de l’animation peut être linéaire, s’accélérer de plus en plus, etc.

Nous allons pouvoir passer les valeurs suivantes à animation-timing-function :

• ease : valeur par défaut. Entre deux valeurs de keyframes, l’animation va commencer relativement lentement, puis accélérer au milieu et se terminer lentement ;
• linear : Entre deux valeurs de keyframes, l’animation aura une vitesse constante du début à la fin ;
• ease-in : Entre deux valeurs de keyframes, l’animation va commencer lentement puis accélérer jusqu’à atteindre la prochaine valeur de keyframe ;
• ease-out : Entre deux valeurs de keyframes, l’animation va commencer rapidement et décélérer progressivement jusqu’à atteindre la prochaine valeur de keyframe ;
• ease-in-out : Entre deux valeurs de keyframes, l’animation commence lentement, accélère au milieu et finit lentement ;
• cubic-bezier(x1, y1, x2, y2) : permet de définir une courbe de Bézier spécifique pour créer une animation à la vitesse totalement contrôlée.

Notre but n’est ici bien évidemment pas de faire un cours sur les courbes de Bézier. Vous pouvez simplement retenir les équivalents mot-clef/Bézier suivants qui peuvent se révéler utiles :

• transition-timing-function : ease est équivalent à transition-timing-function : cubic-bezier(0.25, 0.1, 0.25, 1) ;
• transition-timing-function : ease-in est équivalent à transition-timing-function : cubic-bezier(0.42, 0, 1, 1) ;
• transition-timing-function : ease-out est équivalent à transition-timing-function : cubic-bezier(0, 0, 0.58, 1) ;
• transition-timing-function : ease-in-out est équivalent à transition-timing-function : cubic-bezier(0.42, 0, 0.58, 1).

Concernant la propriété animation-timing-function, vous devez bien comprendre que les valeurs passées vont dicter le comportement des animations entre chaque valeur de keyframes, c’est-à-dire que le pattern donné par animation-timing-function va être appliqué et répété entre chaque valeur de keyframes et ne va pas définir l’animation au complet.

Par exemple, si on définit une règle @keyframes avec une valeur intermédiaire à 50% et que l’animation se fait selon animation-timing-function: ease, l’animation va commencer relativement lentement à partir du from, puis accélérer pour arriver lentement au 50% puis repartir relativement lentement à partir du 50% pour accélérer à nouveau et finir à nouveau lentement au niveau du to.

See the Pen Cours HTML CSS 12.2.6 by Pierre (@pierregiraud) on CodePen.

 

La propriété animation-iteration-count

La propriété animation-iteration-count va nous permettre de définir combien de fois une animation va être jouée. Par défaut, une animation ne sera jouée qu’une fois.

Pour modifier ce comportement par défaut, on va pouvoir passer soit un nombre à animation-iteration-count qui va correspondre au nombre de fois que l’on souhaite jouer l’animation, soit le mot clef infinite qui signifie que l’animation va se répéter à l’infini.

See the Pen Cours HTML CSS 12.2.7 by Pierre (@pierregiraud) on CodePen.

Ici, ma première animation (l’animation correspondante à mon div class="d1") ne va être jouée qu’une fois par défaut.

Ensuite, on demande à notre deuxième animation de se répéter, c’est-à-dire d’être jouée deux fois avec animation-iteration-count: 2.

Finalement, notre troisième animation va se répéter à l’infini grâce à animation-iteration-count: infinite.

 

La propriété animation-direction

La propriété animation-direction va nous permettre de spécifier le sens dans lequel une animation doit être jouée, c’est-à-dire si elle doit être jouée en partant du début ou de la fin pour une ou plusieurs de ses itérations ou répétitions.

Nous allons pouvoir passer les valeurs suivantes à animation-direction :

• normal : valeur par défaut. L’animation est jouée dans le sens dans lequel elle a été déclarée (du from vers le to) ;
• reverse : l’animation est jouée dans le sens inverse pour toutes ses itérations ;
• alternate : l’animation va être jouée une première fois dans le sens normal, puis dans le sens contraire, puis à nouveau dans le sens normal et etc. ;
• alternate-reverse : l’animation va être jouée une première fois dans le sens inverse, puis dans le sens normal, puis à nouveau dans le sens inverse et etc..

Notez qu’en inversant le sens d’une animation pour une ou plusieurs de ses itérations, les propriétés liées au timing seront également inversées. Par exemple, une animation possédant une animation-direction : reverse et une animation-timing-function : ease-in sera jouée comme si la valeur était animation-timing-function : ease-out.

Notez également que les valeurs animation-direction : alternate et animation-direction : alternate-reverse ne vont évidemment n’avoir un effet que pour les animations qui vont être jouées plus d’une fois.

See the Pen Cours HTML CSS 12.2.8 by Pierre (@pierregiraud) on CodePen.

Ici, nous créons une règle @keyframes qui va modifier la valeur de la propriété width de 100% vers 25%. Dans son sens normal, l’animation fait donc passer nos div d’une taille de 100% à 25%.

Ensuite, nous demandons à chacune de nos animations de se répéter à l’infini pour bien voir le comportement lié aux valeurs alternate et alternate-reverse.

Pour notre première animation, cependant, on indique une propriété animation-direction : reverse qui signifie qu’on souhaite que l’animation joue dans le sens contraire. Le départ de notre animation va donc utiliser la taille width: 25% et la taille du div va grandir jusqu’à 100%.

Pour notre deuxième animation, on passe la valeur alternate à la propriété animation-direction. Notre animation va donc jouer une première fois dans le sens normal, puis dans le sens contraire, puis à nouveau dans le sens normal et etc.

La dernière animation va avoir le comportement opposé de la deuxième : elle va commencer à jouer dans le sens inverse puis alterner à chaque nouvelle itération (ou répétition) puisqu’on lui a donné une animation-direction : alternate-reverse

 

La propriété animation-play-state

La propriété animation-play-state va nous permettre de définir si une animation doit être jouée ou être en pause. On va pouvoir lui passer la valeur running (l’animation s’exécute normalement) ou paused (l’animation est mise en pause).

Cette propriété va pouvoir être utile pour mettre une animation en pause à un certain point de l’animation ou selon une certaine action de l’utilisateur. Par exemple, on va pouvoir proposer aux utilisateurs de mettre en pause une animation lorsqu’ils passant le curseur de leur souris sur l’élément pour lequel une animation est jouée ou lorsqu’ils cliquent (en gardant le clic enfoncé) sur l’élément en utilisant les pseudo classes :hover et :active.

See the Pen Cours HTML CSS 12.2.9 by Pierre (@pierregiraud) on CodePen.

 

La propriété animation-delay

La propriété animation-delay va nous permettre de définir quand une animation doit commencer c’est-à-dire s’il doit y avoir un délai avant le lancement de l’animation.

On va devoir passer une valeur en secondes à animation-delay qui va correspondre au délai qu’il doit s’écouler avant le lancement de l’animation.

See the Pen Cours HTML CSS 12.2.10 by Pierre (@pierregiraud) on CodePen.

 

La propriété animation-fill-mode

Par défaut, une règle @keyframes ou plus généralement une animation ne va pas affecter ni donc définir la valeur de la propriété animée en dehors du temps de l’animation.

Nous avons vu cela en début de tutoriel et c’est la raison pour laquelle je définis depuis le début de celui-ci un comportement « normal » ou par défaut pour les propriétés animées en CSS.

Cependant, il existe un moyen plus élégant de faire cela en utilisant la propriété animation-fill-mode. Cette propriété va en effet nous permettre conserver le comportement de nos propriétés défini dans l’animation en dehors de l’animation (avant ou après).

On va ainsi pouvoir appliquer la valeur de départ de notre animation à notre propriété avant que l’animation ne commence ou la valeur d’arrivée de notre animation à la propriété après que celle-ci soit finie.

Pour faire cela, nous allons pouvoir passer l’une des valeurs suivantes à animation-fill-mode :

• backwards : notre propriété animée utilisera la valeur de départ de l’animation comme valeur avant que l’animation ne commence ;
• forwards : notre propriété animée utilisera la valeur de fin de l’animation comme valeur après que l’animation soit terminée ;
• both : notre propriété animée utilisera la valeur de départ de l’animation comme valeur avant que l’animation ne commence et la valeur de fin de l’animation comme valeur après que l’animation soit terminée.

See the Pen Cours HTML CSS 12.2.11 by Pierre (@pierregiraud) on CodePen.

Dans l’exemple ci-dessus, j’applique un délai de 3 secondes à chacune de mes animations.

La première animation a un animation-fill-mode : backwards, elle utilisera donc la valeur de départ de l’animation durant le délai tout comme la dernière animation qui possède un animation-fill-mode : both.

Pour la deuxième animation, au contraire, la propriété n’utilisera pas de valeur avant le début de l’animation puisque rien ne lui a été précisé.

Après la fin de l’animation, c’est l’inverse qui va se passer : notre deuxième animation va conserver la valeur de fin de l’animation de la propriété grâce à animation-fill-mode : forwards tandis que notre première animation n’aura plus aucune valeur attachée à son background-color.

 

La propriété animation

La propriété animation correspond à la version raccourcie ou notation short-hand des propriétés animation-* vues ci-dessus.

Nous allons pouvoir lui passer les différentes valeurs relatives aux propriétés animation- pour créer simplement des animations complètes. Il est généralement considéré comme une bonne pratique de passer les valeurs dans l’ordre suivant pour être certain que l’animation fonctionne correctement :

1. La valeur relative à la propriété animation-name ;
2. La valeur relative à la propriété animation-duration ;
3. La valeur relative à la propriété animation-timing-function ;
4. La valeur relative à la propriété animation-delay ;
5. La valeur relative à la propriété animation-iteration-count ;
6. La valeur relative à la propriété animation-direction ;
7. La valeur relative à la propriété animation-fill-mode ;
8. La valeur relative à la propriété animation-play-state .

Bien évidemment, nous n’allons pas être obligé de préciser toutes les valeurs pour chaque animation : si une valeur est omise, la valeur par défaut de la propriété correspondante sera utilisée. Cependant, notez bien que la première valeur de type « secondes » fournie à animation sera toujours considérée comme étant la durée de l’animation tandis que la deuxième sera toujours considérée comme le délai.

On va également pouvoir créer plusieurs animations avec la propriété animation. Pour cela, il suffira de séparer les déclarations des différentes animations par une virgule.

See the Pen Cours HTML CSS 12.2.12 by Pierre (@pierregiraud) on CodePen.

Ici, dans notre premier exemple, on anime la couleur de fond de notre élément div sur une durée de 5 secondes. L’animation doit progresser de façon linéaire et commencer après un délai de 2 secondes. De plus, on demande à l’animation de se répéter à l’infini et d’alterner le sens dans lequel elle est jouée à chaque fois.

Dans notre deuxième exemple, on anime la taille du div sur 5 secondes. L’animation doit à nouveau progresser de façon linéaire et commencer après un délai de 2 secondes. L’animation doit se répéter 5 fois et nous demandons à ce que la propriété utilise la valeur de départ de l’animation avant que celle-ci ne commence et la valeur d’arrivée après la fin de l’animation.

Notre troisième exemple fait jouer les deux animations précédentes en même temps. Pour cela, on sépare les différentes déclarations par une virgule dans animation, tout simplement.