Animation CSS

Un logo qui pulse doucement, une bannière qui glisse à l’entrée de la page, un bouton qui attire l’œil sans intervention de l’utilisateur : ce type de mouvement continu et défini à l’avance relève des animations, à distinguer des transitions qui, elles, réagissent à un changement d’état ponctuel.

Des étapes déclarées, puis appliquées

Tout commence par une règle @keyframes, qui décrit l’apparence de l’élément à différents pourcentages de la durée totale (0%, 50%, 100%, ou from/to). Cette séquence est ensuite associée à un sélecteur via la propriété raccourcie animation, qui combine son nom, sa durée, sa fonction de temporisation et son nombre de répétitions.

Dans un thème WordPress, ces styles sont généralement chargés via wp_enqueue_style() depuis style.css ou une feuille dédiée, plutôt qu’insérés en ligne, pour bénéficier de la mise en cache du navigateur.

Exemple

@keyframes apparition {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bloc-mise-en-avant {
  animation: apparition 0.6s ease-out both;
}

Pièges fréquents

• Animer width ou top force le navigateur à recalculer la mise en page à chaque image ; préférez transform et opacity, bien plus légers pour le moteur de rendu.
• Une animation en boucle infinie sur un grand nombre d’éléments peut nuire à l’autonomie d’un appareil mobile et mérite d’être limitée avec la média-fonctionnalité prefers-reduced-motion.
• Un élément animé avec transform crée systématiquement son propre contexte d’empilement, ce qui peut modifier l’ordre d’affichage attendu par rapport à d’autres éléments positionnés.