Tutoriel sur les animations CSS : Guide complet pour les débutants

Il s'agit d'un guide de syntaxe complet et d'un didacticiel d'animations CSS interactif pour les débutants. Utilisez-le comme référence pour apprendre les différentes parties de la spécification des animations CSS.

Les performances des navigateurs ont parcouru un long chemin au cours des 10 dernières années. Auparavant, il était beaucoup plus difficile d'ajouter des animations interactives aux pages Web en raison du potentiel de problèmes de rendu et de performances. Mais de nos jours, les animations CSS peuvent être utilisées beaucoup plus librement et la syntaxe est généralement beaucoup plus facile à apprendre par rapport aux fonctionnalités CSS comme la grille ou la flexbox.

Il existe différentes fonctionnalités qui font partie de la spécification d'animation CSS du W3C. Certains plus faciles à utiliser que d'autres. Ce didacticiel sur les animations d'images clés CSS passera en revue toute la syntaxe, y compris chacune des différentes propriétés. J'inclurai des démos interactives pour vous aider à comprendre ce qui est possible avec les animations CSS.

La syntaxe @keyframes

Chaque animation CSS comporte deux parties : une ou plusieurs propriétés animation-* ainsi qu'un ensemble d'images clés d'animation définies à l'aide de la règle @keyframes . Examinons en détail ce qui se passe dans la création d'un ensemble de règles @keyframes .

La syntaxe ressemble à ceci :

 @keyframes moveObject 0% transform: translateX(0); 50% transform: translateX(300px); 100% transform: translateX(300px) scale(1.5);

Comme illustré ici, la règle @keyframes comprend trois éléments de base :

• La règle @keyframes suivie d'un nom d'animation personnalisé
• Un ensemble d'accolades enveloppant toutes les images clés
• Une ou plusieurs images clés, chacune avec un pourcentage suivi d'un ensemble de règles entouré d'accolades

Dans ce premier exemple de notre tutoriel sur les animations CSS, j'ai défini mon animation avec le nom moveObject . Il peut s'agir de n'importe quel nom, il est sensible à la casse et doit respecter les règles d'identification personnalisées dans CSS. Ce nom personnalisé doit correspondre au nom utilisé dans la propriété animation-name (voir plus loin).

Dans mon exemple, vous remarquerez que j'ai utilisé des pourcentages pour définir chacune des images clés de mon animation. Si mon animation comprend des images clés égales à 0% et 100% , je peux également utiliser les mots-clés from et to :

 @keyframes moveObject from transform: translateX(0); 50% transform: translateX(300px); to transform: translateX(300px) scale(1.5);

Le CodePen interactif suivant utilise la syntaxe ci-dessus dans un exemple concret :

Dans la démo, j'ai inclus un bouton qui réinitialise l'animation. J'expliquerai plus tard pourquoi cela est nécessaire. Mais pour l'instant, sachez que cette animation comprend trois images clés qui représentent les étapes de cette séquence d'animation : le début, l'étape de 50 % et la fin (c'est-à-dire 0 %, 50 % et 100 %). Chacun d'entre eux utilise ce qu'on appelle un sélecteur d'images clés avec des accolades pour définir les propriétés à cette étape.

Quelques points à noter à propos de la syntaxe @keyframes :

• Vous pouvez placer les ensembles de règles d'images clés dans l'ordre de votre choix, et le navigateur les exécutera toujours dans l'ordre déterminé par leur pourcentage
• Vous pouvez omettre les images clés 0% et 100% et le navigateur les déterminera automatiquement par les styles existants sur l'élément animé
• S'il existe des images clés en double avec des ensembles de règles différents (par exemple, deux images clés pour 20 % avec une valeur de transformation différente), le navigateur utilise la dernière
• Vous pouvez définir plusieurs images clés dans un seul sélecteur d'images clés avec une virgule : 10%, 30% ...
• Le mot-clé !important annule toute valeur de propriété, il ne doit donc pas être utilisé sur une propriété à l'intérieur d'un ensemble de règles d'image clé

Maintenant que vous avez une bonne compréhension de la syntaxe @keyframes dans ce didacticiel d'animation CSS, examinons les différentes propriétés d'animation définies sur l'élément animé.

Les propriétés d'animation que nous allons couvrir :

La propriété nom de l'animation

Comme mentionné, chaque animation CSS que vous créez doit avoir un nom qui apparaît dans la syntaxe @keyframes . Ce nom doit être le même que celui défini à l'aide de la propriété animation-name .

En utilisant le CSS de la démo précédente, la syntaxe ressemble à ceci :

 .box animation-name: moveObject;

Encore une fois, le nom personnalisé que j'ai défini doit également exister en tant que nom pour une règle @keyframes - sinon ce nom ne fera rien. Vous pouvez considérer cela comme un appel de fonction en JavaScript. La fonction elle-même serait la partie @keyframes moveObject du code, tandis que l'appel de fonction est animation-name: moveObject .

Certaines choses à garder à l'esprit à propos de animation-name :

• La valeur initiale de animation-name est none , ce qui signifie qu'aucune image clé n'est active. Cela peut être utilisé comme une sorte de "bascule" pour désactiver une animation.
• Le nom que vous avez choisi est sensible à la casse et peut inclure des lettres, des chiffres, des traits de soulignement et des traits d'union.
• Le premier caractère du nom doit être une lettre ou un trait d'union, mais un seul trait d'union.
• Le nom ne peut pas être un mot réservé comme unset , initial ou inherit .

La propriété de durée d'animation

La propriété animation-duration , sans surprise, définit le temps nécessaire à une animation pour s'exécuter une fois du début à la fin. Cette valeur peut être spécifiée en secondes ou en millisecondes, comme indiqué ci-dessous :

 .box animation-duration: 2s;

Ce qui précède serait l'équivalent de ce qui suit :

 .box animation-duration: 2000ms;

Vous pouvez voir la propriété animation-duration en action dans la démonstration CodePen suivante. Dans cette démo, vous pouvez choisir la durée de l'animation. Essayez d'entrer différentes valeurs en secondes ou en millisecondes, puis utilisez le bouton "Animer la boîte" pour exécuter l'animation.

Si vous utilisez un petit nombre avec ms pour l'unité, vous ne remarquerez peut-être même aucun mouvement. Essayez de définir un nombre plus élevé si vous utilisez des millisecondes.

Quelques notes sur l'utilisation de animation-duration :

• Les valeurs négatives ne sont pas valides
• L'unité doit être incluse, même si la durée est définie sur 0s (la valeur initiale)
• Vous pouvez utiliser des valeurs fractionnaires (par exemple, 0.8s )

La propriété animation-timing-function

L' animation-timing-function , qui n'est pas aussi évidente dans sa signification que les deux propriétés précédentes, est utilisée pour définir la manière dont l'animation CSS progresse. Ce n'est peut-être pas l'explication la plus claire, mais la syntaxe peut aider à clarifier.

La déclaration ressemble à ceci :

 .box animation-timing-function: linear;

Cette propriété accepte les valeurs de mots clés suivantes :

• ease (la valeur initiale)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

La plupart des valeurs sont relativement faciles à saisir par leurs noms, mais vous pouvez voir en quoi elles diffèrent en utilisant la démonstration interactive suivante :

Utilisez l'entrée de sélection pour choisir l'une des sept valeurs de mots-clés. Notez que les valeurs d'assouplissement- ease-* "facilitent" l'animation de différentes manières. Une valeur linéaire est cohérente d'un bout à l'autre.

La propriété animation-timing-function accepte également les fonctions suivantes :

• cubic-bezier() – Accepte comme arguments quatre valeurs numériques, séparées par des virgules
• steps() - Accepte comme arguments deux valeurs, un nombre et un "terme de saut", séparés par une virgule

Les valeurs des mots clés step-start et step-end sont équivalentes aux valeurs steps(1, jump-start) et steps(1, jump-end) , respectivement.

Comme pour cubic-bezier() , la démo interactive suivante pourrait vous aider à mieux comprendre la fonction :

Notez que la démo vous permet de définir les quatre arguments de la fonction cubic-bezier() . Deux des arguments peuvent être négatifs et deux sont contraints à des valeurs décimales comprises entre 0 et 1. Pour une explication décente du fonctionnement de ces types de fonctions de minutage, vous pouvez consulter cet article ou cet outil interactif.

La fonction steps() , quant à elle, accepte deux arguments :

• Un entier représentant des "arrêts" égaux le long d'un seul cycle de l'animation.
• Un mot-clé facultatif appelé "terme de saut" qui détermine si l'animation "tient" à des intervalles spécifiques

Encore une fois, une démo interactive devrait vous aider à comprendre le fonctionnement de ces jumpterms :

Essayez de sélectionner un entier avec un jumpterm (ou essayez sans jumpterm) pour voir comment les différents mots-clés diffèrent avec différentes valeurs entières. Apparemment, les entiers négatifs sont autorisés mais je ne vois aucune différence entre 0 et toute valeur négative.

La propriété animation-iteration-count

Dans certains cas, vous serez heureux si une animation s'exécute une fois, mais parfois vous souhaitez qu'une animation s'exécute plusieurs fois. La propriété animation-iteration-count vous permet de le faire en acceptant un nombre positif représentant le nombre de fois que vous voulez que l'animation s'exécute :

 .box animation-iteration-count: 3;

La valeur initiale de animation-iteration-count est 1 mais vous pouvez également utiliser le mot-clé infinite (auto-explicatif) ou utiliser une valeur fractionnaire. Une valeur fractionnaire exécutera l'animation à mi-chemin sur l'exécution fractionnaire :

 .box animation-iteration-count: 3.5;

Le code ci-dessus parcourt l'animation trois fois et demie. C'est-à-dire trois itérations complètes suivies d'une itération finale qui s'arrête exactement à mi-chemin.

Cette propriété est plus utile lorsqu'elle est utilisée en conjonction avec la propriété animation-direction (discutée ensuite), car une animation qui s'exécute depuis le début uniquement n'est pas extrêmement utile si elle s'exécute plus d'une fois.

Vous pouvez essayer la démo ci-dessous qui vous permet de sélectionner une valeur fractionnaire pour le nombre d'itérations, afin que vous puissiez voir l'effet :

La propriété animation-direction

Comme mentionné ci-dessus dans ce tutoriel sur les animations CSS, la propriété animation-direction fonctionne bien en conjonction avec animation-iteration-count . La propriété animation-direction vous permet de définir la direction dans laquelle vous souhaitez que l'animation soit lue. La syntaxe ressemble à ceci :

 .box animation-direction: alternate;

Vous pouvez définir la valeur comme l'un des quatre mots clés :

• normal - L'animation est lue à la première itération (par défaut)
• reverse - L'animation est lue à l'envers lors de la première itération
• alternate - L'animation est lue en avant sur la première itération puis alterne sur les itérations suivantes
• alternate-reverse - Identique à alternate mais joue à l'envers à la première itération

Vous pouvez essayer les différentes valeurs avec différents nombres d'itérations à l'aide de la démonstration interactive ci-dessous :

La propriété animation-play-state

La propriété animation-play-state n'est pas extrêmement utile dans un environnement CSS statique, mais peut être utile lors de l'écriture d'animations interactives via JavaScript ou même CSS.

Cette propriété accepte deux valeurs : running ou paused :

 .box animation-direction: paused;

Par défaut, toute animation donnée est dans l'état "en cours d'exécution". Mais vous pouvez utiliser JavaScript pour basculer la valeur de la propriété. Vous pouvez même éventuellement utiliser une fonctionnalité CSS interactive telle que :hover ou :focus pour passer l'animation à un état "en pause", qui gèle essentiellement l'animation où qu'elle se trouve dans l'itération en cours.

La démo interactive ci-dessous a une animation fonctionnant à l'infini avec deux boutons pour "mettre en pause" et "reprendre" l'animation.

La propriété animation-delay

Certaines animations sont conçues pour commencer à s'animer immédiatement, tandis que d'autres pourraient bénéficier d'un léger délai avant la première itération. La propriété animation-delay vous permet d'accomplir cela.

 .box animation-delay: 4s;

Comme d'autres valeurs basées sur le temps, vous pouvez définir le animation-delay sur une valeur en secondes ou en millisecondes. Vous pouvez également utiliser des valeurs fractionnaires.

Il est important de noter que le retard ne se produit qu'à la première itération, et non à chaque itération. Vous pouvez essayer ceci en utilisant la démo interactive ci-dessous :

La démo vous donne la possibilité de modifier la valeur d'itération ainsi que le délai, de sorte que vous pouvez voir que le délai n'affecte aucune des itérations suivantes - uniquement la première.

Une façon intéressante d'utiliser cette propriété est avec une valeur négative. Par exemple, en utilisant la démo ci-dessus, essayez de régler le animation-delay sur -0.5s . Vous remarquerez que le retard négatif fonctionne presque comme si vous avanciez dans une machine à voyager dans le temps - l'animation commence à mi-chemin plutôt qu'au début.

La propriété animation-fill-mode

La dernière propriété longue que je couvrirai dans ce didacticiel sur les animations CSS est celle que j'ai utilisée dans la démo précédente. Vous remarquerez que lorsque l'animation arrête l'itération finale, la boîte reste là où elle est. Ceci est accompli en utilisant animation-fill-mode .

 .box animation-fill-mode: forwards;

Cette propriété définit la manière dont une animation applique les styles à l'élément ciblé avant et après son exécution. C'est un peu difficile à saisir conceptuellement, je vais donc couvrir la signification de chaque valeur; vous pouvez ensuite comparer les valeurs à l'aide de la démo interactive.

Cette propriété accepte les quatre valeurs de mots clés suivantes :

• none - La valeur par défaut, aucun style appliqué avant ou après l'exécution
• forwards - Conserve tous les styles appliqués dans la dernière image clé de l'animation
• vers l' backwards - Plus ou moins l'inverse de la valeur précédente, il conserve les styles appliqués à l'animation dès qu'il commence l'exécution mais avant le début de l'animation
• both - Conserve les styles pour l' forwards et l' backwards

La démo finale de ce didacticiel sur les animations CSS rendra les choses un peu plus claires, mais celle-ci peut prendre beaucoup de temps avant de vraiment comprendre ce qu'elle fait et comment elle y parvient.

Pour plus de commodité, j'ai ajouté toutes les démos dans une seule collection CodePen.

Vous remarquerez que la démo vous permet d'ajuster le mode de remplissage, le délai, la direction et le nombre d'itérations, car tout cela peut avoir un effet sur l'apparence. J'ai également ajouté une couleur d'arrière-plan différente à la boîte animée dans la première image clé, ce qui contribue à rendre les valeurs du mode de remplissage un peu plus claires. Si vous ne comprenez toujours pas comment fonctionne animation-fill-mode , vous pouvez consulter un article plus ancien que j'ai écrit et qui traite en profondeur animation-fill-mode .

La propriété raccourcie d'animation

J'ai couvert huit propriétés différentes dans ce didacticiel d'animation CSS pour les débutants et je vous encourage à utiliser la main longue. Cela vous permettra de voir plus facilement les valeurs explicites définies.

Une fois que vous avez une bonne compréhension de chacune des propriétés, vous avez la possibilité d'utiliser la propriété raccourcie animation , qui vous permet de définir toutes les propriétés longues dans une seule déclaration.

 .box animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;

En toute honnêteté, cela fait beaucoup d'informations sur une seule ligne. Je recommanderais d'utiliser le raccourci si la déclaration n'inclut pas toutes les propriétés, mais peut-être seulement trois ou quatre d'entre elles.

Si vous utilisez le raccourci, vous pouvez mettre les valeurs dans l'ordre de votre choix, mais notez les règles suivantes :

• La première valeur qui définit le temps est la animation-duration ; toute valeur de temps ultérieure est l' animation-delay .
• S'il y a un conflit entre un mot-clé et animation-name , la valeur du mot-clé prévaudra si elle apparaît en premier.
• Toute valeur omise reviendra à son état initial, comme pour toute propriété abrégée CSS.

Appliquer plusieurs animations à un seul élément

Une dernière fonctionnalité qu'il est bon de connaître est que vous avez la possibilité d'appliquer plusieurs animations à un seul objet en séparant les animations par des virgules.

Voici un exemple utilisant le raccourci :

 .box animation: moveObject 2s ease-in-out, fadeBox 3s linear;

Ici, j'ai défini deux animations différentes qui correspondraient à deux ensembles différents d'images clés, mais s'appliqueraient au même objet. Ce même code pourrait être écrit à la main comme suit :

 .box animation-name: moveObject, fadeBox; animation-duation: 2s, 3s; animation-timing-function: ease-in-out, linear;

Remarquez comment chaque propriété comprend deux valeurs séparées par des virgules. Dans ce cas, la sténographie serait presque certainement plus facile à lire et à entretenir.

Conclusion de ce tutoriel sur les animations CSS

Un dernier avertissement : utilisez l'animation avec modération et rappelez-vous que certains internautes peuvent être affectés par le clignotement des couleurs et d'autres objets en mouvement rapide.