Maîtriser les Animations CSS

Les animations peuvent ajouter une couche de raffinement et d’interactivité à vos conceptions web. Avec CSS, vous pouvez créer des animations qui améliorent l’expérience utilisateur sans avoir recours à JavaScript. Ce guide explore des techniques avancées d’animation pour vous aider à concevoir des animations visuellement attractives et performantes.

Les Keyframes CSS

La règle @keyframes est le cœur des animations CSS. Elle permet de définir les étapes d’une animation.

Exemple

@keyframes glisser {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.element {
  animation: glisser 2s ease-in-out;
}

<div class="element">Bienvenue !</div>

Dans cet exemple, l’élément .element glisse depuis la gauche et devient entièrement visible en 2 secondes.

Propriétés d’Animation

Les animations CSS sont contrôlées à l’aide de propriétés comme animation-duration, animation-timing-function et animation-delay.

Encore un exemple

.rebond {
  animation: rebond 1s infinite;
}

@keyframes rebond {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

Cela crée un effet de “rebondissement” qui se répète indéfiniment.

Effets de Transition

Les transitions sont utilisées pour animer les changements de propriétés lorsqu’un état d’un élément change, par exemple au survol.

Un exemple

.bouton {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  transition: background-color 0.3s, transform 0.3s;
}

.bouton:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}

<button class="bouton">Survolez-moi</button>

Le bouton change sa couleur d’arrière-plan et s’agrandit légèrement lorsqu’on le survole.

Combiner Transitions et Animations

Les transitions et animations peuvent être combinées pour créer des effets plus sophistiqués.

Voici un exemple

.carte {
  background-color: white;
  border: 1px solid #ddd;
  transition: transform 0.5s, box-shadow 0.5s;
}

.carte:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

<div class="carte">Survolez-moi !</div>

La carte s’élève légèrement et gagne une ombre lorsqu’on la survole.

Optimisation des Performances d’Animation

Des animations mal optimisées peuvent entraîner des problèmes de performance, surtout sur les appareils mobiles. Suivez ces conseils :

1. Utilisez Transform et Opacity : Les animations impliquant transform et opacity sont accélérées par le GPU et plus efficaces que celles modifiant les propriétés de disposition comme width ou height.
2. Évitez les Grands Repaints : Minimisez les modifications du DOM pendant les animations.
3. Limitez la Portée : Utilisez les animations avec parcimonie et évitez d’animer un trop grand nombre d’éléments simultanément.

Animer les SVGs

Le CSS peut également animer des SVGs pour des effets élaborés.

Par exemple

path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: dessiner 2s linear forwards;
}

@keyframes dessiner {
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <path
    d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80"
    stroke="black"
    fill="transparent"
    stroke-width="2"
  />
</svg>

Le chemin semble être “dessiné” lorsque l’animation se joue.

Animations et Accessibilité

Assurez-vous que vos animations sont accessibles et ne causent pas d’inconfort aux utilisateurs sensibles au mouvement. Respectez la media query prefers-reduced-motion.

Pour finir, un exemple

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Cela désactive les animations et transitions pour les utilisateurs qui préfèrent réduire les mouvements.

Conclusion

Les animations CSS offrent des possibilités infinies pour enrichir la conception web. En maîtrisant les keyframes, les transitions et les bonnes pratiques en matière de performance, vous pouvez créer des expériences immersives qui captivent les utilisateurs. Priorisez toujours l’accessibilité et optimisez les performances pour garantir une expérience fluide.