Maîtriser les @keyframes CSS : Un guide complet des chronologies d'animation

Les animations CSS donnent vie aux sites web, améliorant l'expérience utilisateur et l'attrait visuel. La règle @keyframes est la pierre angulaire des animations CSS, vous permettant de définir des séquences d'animation précises. Ce guide complet vous expliquera les subtilités de @keyframes, vous donnant le pouvoir de créer des animations captivantes pour vos projets web, quels que soient votre situation géographique ou votre contexte culturel.

Que sont les animations CSS ?

Les animations CSS vous permettent de modifier l'apparence des éléments HTML au fil du temps sans dépendre de JavaScript. Elles offrent un moyen performant et déclaratif de créer des effets visuels, des transitions subtiles aux séquences complexes.

Présentation de la règle @keyframes

La règle @keyframes spécifie la séquence d'animation en définissant des styles pour certains points le long de la chronologie de l'animation. Pensez-y comme à une série d'instantanés de l'apparence d'un élément à différentes étapes de l'animation. Ces instantanés sont définis comme des images-clés (keyframes).

Syntaxe de @keyframes

La syntaxe de base de la règle @keyframes est la suivante :

            @keyframes nom-animation {
  0%   { /* styles CSS au début de l'animation */ }
  25%  { /* styles CSS à 25% de l'animation */ }
  50%  { /* styles CSS à 50% de l'animation */ }
  75%  { /* styles CSS à 75% de l'animation */ }
  100% { /* styles CSS à la fin de l'animation */ }
}
            

              
                Copy
              
            
          

• animation-name : Un nom que vous choisissez pour identifier l'animation. Ce nom sera utilisé plus tard pour appliquer l'animation à un élément.
• 0% à 100% : Représentent le pourcentage de la chronologie de l'animation. Vous pouvez également utiliser les mots-clés from (équivalent à 0%) et to (équivalent à 100%).
• { /* styles CSS */ } : Les styles CSS qui seront appliqués à l'élément au point correspondant de l'animation.

Exemple : une animation simple de fondu d'entrée

Voici un exemple simple d'une animation de fondu d'entrée utilisant @keyframes :

            @keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.element {
  animation-name: fadeIn;
  animation-duration: 1s; /* 1 seconde */
}
            

              
                Copy
              
            
          

Dans cet exemple, l'animation fadeIn change progressivement l'opacité d'un élément de 0 (totalement transparent) à 1 (totalement opaque) sur une durée d'une seconde. La propriété animation-name sur la classe .element lie l'élément à l'animation fadeIn. La propriété animation-duration définit la durée de l'animation.

Appliquer des animations aux éléments

Pour appliquer une animation définie avec @keyframes à un élément HTML, vous devez utiliser la propriété raccourcie animation ou ses propriétés individuelles :

• animation-name : Spécifie le nom de l'animation @keyframes à appliquer.
• animation-duration : Spécifie la durée nécessaire à une animation pour terminer un cycle. Exprimée en secondes (s) ou en millisecondes (ms).
• animation-timing-function : Spécifie la courbe de vitesse de l'animation. Les valeurs courantes incluent linear, ease, ease-in, ease-out, ease-in-out et cubic-bezier().
• animation-delay : Spécifie un délai pour le début de l'animation. Exprimé en secondes (s) ou en millisecondes (ms).
• animation-iteration-count : Spécifie le nombre de fois qu'une animation doit se répéter. Utilisez infinite pour une boucle continue.
• animation-direction : Spécifie si l'animation doit se jouer en avant, en arrière ou en alternance. Les valeurs incluent normal, reverse, alternate et alternate-reverse.
• animation-fill-mode : Spécifie quelles valeurs sont appliquées à l'élément lorsque l'animation n'est pas en cours (avant son début, après sa fin). Les valeurs incluent none, forwards, backwards et both.
• animation-play-state : Spécifie si l'animation est en cours d'exécution ou en pause. Les valeurs incluent running et paused.

La propriété raccourcie animation

La propriété raccourcie animation vous permet de spécifier toutes les propriétés d'animation en une seule déclaration. L'ordre est important :

            animation: nom-animation durée-animation fonction-timing délai-animation nombre-itérations direction-animation mode-remplissage état-lecture;
            

              
                Copy
              
            
          

Toutes les propriétés ne sont pas requises ; vous pouvez omettre des propriétés et utiliser leurs valeurs par défaut.

Exemple : une balle qui rebondit

Voici un exemple plus complexe d'une animation de balle qui rebondit :

            @keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-30px); }
  60% { transform: translateY(-15px); }
}

.ball {
  width: 50px;
  height: 50px;
  background-color: red;
  border-radius: 50%;
  animation-name: bounce;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
            

              
                Copy
              
            
          

Dans cet exemple, l'animation bounce utilise transform: translateY() pour déplacer la balle verticalement. L'animation utilise plusieurs images-clés pour créer l'effet de rebond. La propriété animation-timing-function: ease-in-out offre un rebond plus doux et plus naturel.

Techniques @keyframes avancées

Utiliser des images-clés intermédiaires

Vous n'êtes pas limité aux seules images-clés 0% et 100%. Vous pouvez définir autant d'images-clés intermédiaires que nécessaire pour créer des séquences d'animation complexes. Cela permet un contrôle précis du comportement de l'animation à différents moments.

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

              
                Copy
              
            
          

Cette animation parcourt différentes couleurs de fond, chaque couleur occupant 25% de la chronologie de l'animation.

Animer plusieurs propriétés

Vous pouvez animer plusieurs propriétés CSS au sein d'une seule règle @keyframes. Cela vous permet de créer des animations sophistiquées qui affectent divers aspects de l'apparence d'un élément.

            @keyframes moveAndFade {
  0%   { transform: translateX(0); opacity: 1; }
  50%  { transform: translateX(100px); opacity: 0.5; }
  100% { transform: translateX(200px); opacity: 0; }
}
            

              
                Copy
              
            
          

Cette animation déplace simultanément l'élément horizontalement et le fait disparaître en fondu.

Utiliser steps() pour les animations par étapes

La fonction de temporisation steps() vous permet de créer des animations qui progressent par étapes discrètes plutôt qu'en transition fluide entre les valeurs. C'est utile pour créer des animations de type 'sprite sheet' ou des animations qui imitent un affichage numérique.

            @keyframes walk {
  from { background-position: 0 0; }
  to   { background-position: -600px 0; }
}

.sprite {
  width: 100px;
  height: 100px;
  background-image: url("sprite-sheet.png");
  animation: walk 1s steps(6) infinite;
}
            

              
                Copy
              
            
          

Dans cet exemple, l'animation walk utilise une feuille de sprites (sprite sheet) contenant 6 images. La fonction de temporisation steps(6) garantit que l'animation progresse à travers chaque image par une étape distincte.

Meilleures pratiques pour les animations CSS

• Utilisez les animations avec parcimonie. Une surutilisation des animations peut distraire les utilisateurs et donner à votre site web une impression de lenteur et de manque de professionnalisme.
• Optimisez pour la performance. Évitez d'animer des propriétés qui déclenchent des opérations de mise en page (layout) ou de rendu (paint), comme width, height et top. Animez plutôt transform et opacity, qui sont gérées par le GPU et sont plus performantes.
• Fournissez des animations de repli. Les navigateurs plus anciens peuvent ne pas prendre en charge les animations CSS. Fournissez des animations de repli en utilisant JavaScript ou des transitions CSS pour assurer une expérience cohérente sur les différents navigateurs.
• Pensez à l'accessibilité. Certains utilisateurs peuvent être sensibles aux animations. Proposez une option pour désactiver les animations afin d'améliorer l'accessibilité. Utilisez la media query prefers-reduced-motion pour détecter si l'utilisateur a demandé une réduction des mouvements dans les paramètres de son système d'exploitation.
• Gardez les animations courtes et simples. Les animations complexes peuvent être difficiles à comprendre et à maintenir. Décomposez les animations complexes en composants plus petits et plus gérables.
• Utilisez des noms significatifs pour les animations. Choisissez des noms d'animation qui décrivent clairement leur objectif. Cela rendra votre code plus facile à comprendre et à maintenir. Par exemple, au lieu de animation1, utilisez slideInFromLeft.

Considérations sur l'accessibilité

Il est crucial de prendre en compte l'accessibilité lors de la mise en œuvre d'animations CSS. Certains utilisateurs peuvent souffrir du mal des transports ou être distraits par des mouvements excessifs. Voici comment rendre vos animations plus accessibles :

• Respectez prefers-reduced-motion. Cette media query vous permet de détecter si l'utilisateur a demandé une réduction des mouvements dans son système d'exploitation. Si l'utilisateur a activé ce paramètre, vous devez désactiver ou réduire l'intensité de vos animations.

              @media (prefers-reduced-motion: reduce) {
    .animated-element {
      animation: none !important;
      transition: none !important;
    }
  }
              
  
                
                  Copy
                
              
            

• Fournissez des contrôles pour mettre en pause ou arrêter les animations. Permettez aux utilisateurs de mettre en pause ou d'arrêter les animations s'ils les trouvent distrayantes ou envahissantes.
• Assurez-vous que les animations ne transmettent pas d'informations critiques. Les informations importantes doivent toujours être accessibles même si les animations sont désactivées.
• Testez avec des technologies d'assistance. Utilisez des lecteurs d'écran et d'autres technologies d'assistance pour vous assurer que vos animations sont accessibles aux utilisateurs handicapés.

Exemples concrets de @keyframes en action

Voici quelques exemples de la manière dont @keyframes peut être utilisé dans des scénarios de conception web réels :

• Animations de chargement : Utilisez @keyframes pour créer des animations de chargement engageantes qui divertissent les utilisateurs pendant qu'ils attendent le chargement du contenu. Les exemples incluent une roue qui tourne, une barre de progression ou une icône qui palpite.
• Effets de survol : Utilisez @keyframes pour créer des effets de survol subtils qui fournissent un retour visuel aux utilisateurs lorsqu'ils interagissent avec des éléments de la page. Les exemples incluent un bouton qui change de couleur ou de taille au survol, ou une image qui zoome légèrement.
• Animations déclenchées au défilement : Utilisez JavaScript pour détecter quand un élément est dans la fenêtre d'affichage (viewport) et déclencher une animation CSS. Cela peut être utilisé pour créer des effets de défilement engageants, comme des éléments qui apparaissent en fondu lorsqu'ils entrent dans le champ de vision.
• Animations interactives : Utilisez JavaScript pour contrôler les animations CSS en fonction des actions de l'utilisateur, comme les clics de souris ou les pressions de touches. Cela peut être utilisé pour créer des animations interactives qui répondent aux actions de l'utilisateur.
• Micro-interactions : Des animations subtiles qui fournissent un retour sur les actions de l'utilisateur. Un bouton qui s'agrandit subtilement lorsqu'on clique dessus, ou un champ de formulaire qui tremble doucement lorsqu'une erreur se produit. Ces petits détails peuvent grandement améliorer l'expérience utilisateur.

Exemple : Site e-commerce international

Prenons l'exemple d'un site de e-commerce international qui souhaite présenter ses produits avec des visuels attrayants. Il peut utiliser @keyframes pour créer un carrousel de produits rotatif. Chaque image de produit passe en douceur à la suivante, offrant une expérience de navigation dynamique et visuellement agréable. Ce carrousel pourrait adapter sa vitesse d'animation en fonction des préférences de l'utilisateur (par exemple, une vitesse plus lente pour les utilisateurs à faible bande passante). Il pourrait offrir des options pour mettre en pause, rembobiner ou avancer rapidement dans l'affichage des produits. Pour répondre aux besoins des utilisateurs internationaux, le site pourrait adapter la vitesse de l'animation pour accommoder les utilisateurs qui naviguent avec des connexions à plus faible bande passante, améliorant ainsi l'accessibilité et la convivialité.

Un autre exemple est une animation de sélection de langue, où les drapeaux apparaissent et disparaissent doucement en fondu, guidant les utilisateurs vers le choix de leur langue préférée. Il est important de s'assurer que l'animation ne bloque pas les fonctionnalités clés ou ne distrait pas les utilisateurs, pour les utilisateurs de toutes cultures et origines.

Débogage des animations CSS

Le débogage des animations CSS peut être difficile. Voici quelques conseils utiles :

• Utilisez les outils de développement du navigateur. La plupart des navigateurs modernes disposent d'outils de développement intégrés qui vous permettent d'inspecter les animations CSS, de les mettre en pause, de les parcourir image par image et de modifier leurs propriétés en temps réel.
• Utilisez la propriété animation-play-state. Vous pouvez utiliser cette propriété pour mettre en pause et reprendre les animations, ce qui peut être utile pour le débogage.
• Utilisez la propriété animation-delay. Vous pouvez utiliser cette propriété pour retarder le début d'une animation, ce qui peut être utile pour observer son état initial.
• Simplifiez vos animations. Si vous avez du mal à déboguer une animation complexe, essayez de la simplifier en supprimant certaines images-clés ou propriétés.
• Vérifiez les fautes de frappe. Assurez-vous de ne pas avoir fait de fautes de frappe dans votre code CSS. Les fautes de frappe peuvent souvent faire échouer les animations.
• Utilisez un validateur CSS. Un validateur CSS peut vous aider à identifier les erreurs de syntaxe et autres problèmes dans votre code CSS.

Conclusion

Les @keyframes CSS offrent un moyen puissant et polyvalent de créer des animations engageantes et visuellement attrayantes pour vos projets web. En comprenant la syntaxe et les propriétés de @keyframes, et en suivant les meilleures pratiques, vous pouvez créer des animations qui améliorent l'expérience utilisateur et donnent vie à vos sites web pour un public mondial. N'oubliez pas de donner la priorité à l'accessibilité et à la performance lors de la mise en œuvre d'animations CSS afin de garantir que vos sites web soient utilisables et agréables pour tous. Des simples fondus aux animations complexes de sprites, les possibilités sont infinies. Adoptez la puissance de @keyframes et élevez vos compétences en conception web au niveau supérieur. Tenez compte de la diversité de votre public mondial et concevez des animations qui soient universellement attrayantes et accessibles.