Animations CSS

Les animations CSS offrent une manière sophistiquée d’améliorer l’expérience utilisateur grâce à des transitions et des effets fluides et visuellement attrayants. Dans ce guide complet, nous examinons les nuances des animations CSS, en fournissant des explications détaillées, des exemples et des bonnes pratiques pour créer des designs dynamiques et réactifs.

Introduction aux animations CSS

Les animations CSS permettent aux développeurs web d’animer des éléments HTML sans recourir à JavaScript. Elles sont définies à l’aide de keyframes, qui spécifient les styles à différents moments de la séquence d’animation.

Exemple de base d’animation CSS

---

<div class="animated-box"></div>

<style>
  .animated-box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 4s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }
</style>

Try it Yourself »

WARNING

Testez toujours les animations sur différents appareils et navigateurs afin de garantir des performances fluides.

Propriétés clés des animations CSS

• animation-name: Spécifie le nom des keyframes.
• animation-duration: Définit la durée de l’animation.
• animation-timing-function: Définit la courbe de vitesse de l’animation.
• animation-delay: Retarde le démarrage de l’animation.
• animation-iteration-count: Définit le nombre de fois que l’animation doit être jouée.
• animation-direction: Spécifie si l’animation doit être jouée en sens inverse lors des cycles alternés.

Application de plusieurs animations

Vous pouvez appliquer plusieurs animations à un seul élément en les séparant par des virgules.

---

<div class="multi-animated-box"></div>

<style>
  .multi-animated-box {
    width: 100px;
    height: 100px;
    background-color: blue;
    animation: move 4s infinite, rotate 2s infinite;
  }

  @keyframes move {
    0% { transform: translateX(0); }
    50% { transform: translateX(200px); }
    100% { transform: translateX(0); }
  }

  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

Try it Yourself »

Techniques avancées

Animations réactives

Assurez-vous que les animations sont réactives et s’adaptent à différentes tailles d’écran.

---

<div class="responsive-box"></div>

<style>
  .responsive-box {
    width: 50vw;
    height: 50vw;
    background-color: green;
    animation: resize 4s infinite;
  }

  @keyframes resize {
    0% { width: 50vw; height: 50vw; }
    50% { width: 70vw; height: 70vw; }
    100% { width: 50vw; height: 50vw; }
  }
</style>

Try it Yourself »

Combiner des transformations

Combinez plusieurs propriétés de transformation pour créer des animations complexes.

---

<div class="complex-transform-box"></div>

<style>
  .complex-transform-box {
    width: 100px;
    height: 100px;
    background-color: yellow;
    animation: complexTransform 5s infinite;
  }

  @keyframes complexTransform {
    0% {
      transform: translateX(0) rotate(0deg) scale(1);
    }
    50% {
      transform: translateX(200px) rotate(180deg) scale(1.5);
    }
    100% {
      transform: translateX(0) rotate(360deg) scale(1);
    }
  }
</style>

Try it Yourself »

Modes de remplissage des animations

La propriété animation-fill-mode définit comment une animation CSS applique des styles à sa cible avant et après son exécution.

---

<div class="fill-mode-box"></div>

<style>
  .fill-mode-box {
    width: 100px;
    height: 100px;
    background-color: purple;
    animation: fillMode 3s forwards;
  }

  @keyframes fillMode {
    0% { background-color: purple; }
    100% { background-color: orange; }
  }
</style>

Try it Yourself »

Délais d’animation et fonctions de temporisation

Utilisez les délais d’animation et les fonctions de temporisation pour contrôler le rythme et le démarrage des animations.

---

<div class="timing-function-box"></div>

<style>
  .timing-function-box {
    width: 100px;
    height: 100px;
    background-color: pink;
    animation: timingFunction 4s ease-in-out infinite;
  }

  @keyframes timingFunction {
    0% { transform: translateY(0); }
    50% { transform: translateY(200px); }
    100% { transform: translateY(0); }
  }
</style>

Try it Yourself »

Bonnes pratiques pour les animations CSS

1. Minimiser l’utilisation du CPU : Gardez les animations simples pour éviter une utilisation excessive du CPU, ce qui peut dégrader les performances, en particulier sur les appareils mobiles.
2. Utiliser l’accélération matérielle : Utilisez les propriétés transform et opacity pour tirer parti de l’accélération GPU.
3. Solutions de repli : Fournissez des styles de repli pour les navigateurs qui ne prennent pas en charge les animations.
4. Tests de performance : Testez les animations sur différents appareils et navigateurs afin de garantir des performances fluides.

INFO

Vous pouvez utiliser JavaScript pour créer des animations plus interactives. Voir Animations JavaScript.

Exemple d’une animation bien optimisée

---

<div class="optimized-box"></div>

<style>
  .optimized-box {
    width: 100px;
    height: 100px;
    background-color: cyan;
    animation: optimizedMove 3s ease-in-out infinite;
  }

  @keyframes optimizedMove {
    0% { transform: translateY(0) scale(1); }
    50% { transform: translateY(200px) scale(1.2); }
    100% { transform: translateY(0) scale(1); }
  }
</style>

Try it Yourself »

Conclusion

Les animations CSS sont un outil puissant pour créer des expériences web dynamiques et engageantes. En maîtrisant les keyframes, les propriétés d’animation et les techniques avancées, les développeurs peuvent produire des animations de qualité professionnelle qui améliorent l’interaction avec l’utilisateur. Expérimentez différentes animations, testez soigneusement et respectez les bonnes pratiques pour obtenir les meilleurs résultats.

Practice

Which of the following statements about CSS animations are correct?

CSS animations are defined using keyframes.The 'animation-name' property specifies the name of the keyframes.JavaScript is required to create CSS animations.The 'animation-duration' property sets the speed curve of the animation.CSS animations can have multiple animations applied to a single element by separating them with commas.The 'animation-iteration-count' property defines the number of times the animation should be played.CSS animations cannot be responsive to screen sizes.