@keyframes en CSS : définir les étapes d'une animation

Qu'est-ce que @keyframes en CSS ?

Quand on veut animer un élément en CSS, on a besoin de deux choses : décrire ce que fait l'animation (les étapes), et dire à quel élément l'appliquer. @keyframes s'occupe de la première partie. C'est là qu'on décrit ce qui se passe à chaque moment de l'animation, exprimé en pourcentage de la durée totale.

Concrètement, @keyframes est une règle CSS qui définit une séquence d'états. On lui donne un nom, on précise l'état de départ, l'état final (et éventuellement des états intermédiaires), puis on branche cette animation sur un élément via la propriété animation.

Syntaxe

La structure d'une règle @keyframes est toujours la même :

@keyframes nom_animation {
  pourcentage {
    propriété: valeur;
  }
  pourcentage {
    propriété: valeur;
  }
}

Chaque étape est un pourcentage entre 0% et 100%. À la place de ces deux bornes, on peut aussi écrire from (équivalent à 0%) et to (équivalent à 100%) — c'est plus lisible pour les animations simples.

Le nom_animation doit être unique dans votre feuille de style : c'est ce nom qui fait le lien entre la règle @keyframes et la propriété animation appliquée sur un élément.

Exemples

Exemple 1 : changer la couleur de fond

L'animation la plus simple qui soit : un élément passe du bleu au jaune sur toute la durée de l'animation.

@keyframes changementCouleurFond {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

Exemple 2 : agrandir un élément

Ici, un élément part de 50×50 pixels et grandit jusqu'à 100×100 pixels. Utile pour des effets de zoom ou d'apparition.

@keyframes agrandissement {
  0% {
    width: 50px;
    height: 50px;
  }
  100% {
    width: 100px;
    height: 100px;
  }
}

Exemple 3 : rotation en plusieurs étapes

On peut ajouter autant d'étapes intermédiaires que nécessaire. Dans cet exemple, la rotation est découpée en quatre quarts pour contrôler précisément chaque palier :

@keyframes animationComplexe {
  0%  { transform: rotate(0deg);   }
  25% { transform: rotate(90deg);  }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100%{ transform: rotate(360deg); }
}

Résultat identique à une rotation continue, mais cette structure permet de modifier la vitesse entre chaque quart si on le souhaite — par exemple en ajoutant une propriété animation-timing-function dans certaines étapes.

Prise en charge dans les navigateurs

Les numéros indiquent la première version qui prend en charge la propriété. Les suffixes -webkit-, -moz- et -o- correspondent aux versions préfixées, nécessaires sur les navigateurs plus anciens.

Navigateur
Version	43 4 -webkit-	10	16 5 -moz-	9 4 -webkit-	30 15 -webkit- 12 -o-

Appliquer l'animation à un élément HTML

Une règle @keyframes seule ne fait rien. Pour que l'animation se déclenche, il faut la relier à un élément via la propriété animation.

Voici les quatre propriétés les plus utilisées :

selecteur {
  animation-name: nom_animation;
  animation-duration: temps;
  animation-timing-function: fonction;
  animation-iteration-count: nombre;
}

• animation-name : le nom exact de la règle @keyframes à utiliser
• animation-duration : la durée d'un cycle (ex : 2s, 500ms)
• animation-timing-function : la courbe de vitesse (linear, ease, ease-in…)
• animation-iteration-count : le nombre de répétitions, ou infinite pour une boucle continue

Exemple avec l'animation changementCouleurFond définie plus haut, appliquée à un div :

#maDiv {
  animation-name: changementCouleurFond;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

La div change de couleur en continu, en bouclant toutes les 2 secondes à vitesse constante.

On peut aussi regrouper ces quatre propriétés en une seule ligne avec la syntaxe raccourcie animation :

#maDiv {
  animation: changementCouleurFond 2s linear infinite;
}

Exemple complet : un élément qui tourne

Voici une page HTML autonome qui met tout ensemble : la règle @keyframes, l'application via animation et un élément cible.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>CSS @keyframes — exemple complet</title>
  <style>
    h1 { color: #003668; }

    /* Définition de l'animation : rotation complète en 360° */
    @keyframes tourner {
      0%   { transform: rotate(0deg);   }
      100% { transform: rotate(360deg); }
    }

    /* Application de l'animation à l'élément cible */
    .monElement {
      position: relative;
      top: 100px;
      left: 100px;
      width: 200px;
      border: solid 1px black;
      animation: tourner 5s linear infinite;
    }
  </style>
</head>
<body>
  <h1>Un élément qui tourne en boucle</h1>
  <div class="monElement">Mon élément qui tourne</div>
</body>
</html>

Pour aller plus loin sur les animations CSS — propriétés disponibles, combinaisons avancées, exemples interactifs — consultez notre tutoriel complet sur les animations CSS3. La bibliothèque Animate.css propose aussi une collection d'animations prêtes à l'emploi si vous avez besoin de résultats rapides.

Par carabde | Mis à jour le 28 avril 2026