Frontend Academy · Leçon

Animations @keyframes

Définissez des animations en plusieurs étapes avec @keyframes, associez-les avec la notation abrégée animation et contrôlez le nombre d’itérations, la direction et le mode de remplissage.

Animations @keyframes est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Transitions et animations

Les transitions animent le passage entre deux états lorsqu’une modification les déclenche. Les animations @keyframes s’exécutent automatiquement, peuvent se répéter, s’inverser, être lues à l’infini et définir plusieurs étapes intermédiaires — aucun déclencheur n’est nécessaire.

Définir @keyframes

Déclarez une séquence d’animation avec @keyframes. Définissez les états à des pourcentages (0 %, 50 %, 100 %) ou à l’aide des mots-clés from et to.

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

La notation abrégée animation

animation: name duration timing-function delay iteration-count direction fill-mode. Appliquez l’animation à un élément avec cette notation abrégée.

.card {
  animation: fadeIn 0.4s ease-out forwards;
}

.loader {
  animation: pulse 1.5s ease-in-out infinite;
}

animation-iteration-count

Définit le nombre de fois que l’animation est lue. infinite la répète indéfiniment. Un nombre la lit exactement ce nombre de fois.

.spinner {
  animation: spin 1s linear infinite;
}

.badge {
  animation: bounce 0.6s ease 3; /* plays 3 times */
}

animation-direction

normal (par défaut) : vers l’avant à chaque fois. reverse : vers l’arrière. alternate : vers l’avant, puis vers l’arrière. alternate-reverse. La valeur alternate est idéale pour les effets de va-et-vient.

@keyframes swing {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}
.pendulum {
  animation: swing 1s ease-in-out infinite alternate;
}

animation-fill-mode

Contrôle l’état de l’élément avant et après l’animation. forwards : l’élément reste dans l’état de la dernière image clé. backwards : applique l’état from pendant le délai. both : les deux.

.entrance {
  opacity: 0;
  animation: fadeIn 0.5s ease 0.2s forwards;
  /* stays visible (opacity: 1) after animation ends */
}

animation-play-state

Mettez les animations en pause et reprenez-les avec JavaScript en basculant animation-play-state: paused | running.

// Pause:
element.style.animationPlayState = 'paused';
// Resume:
element.style.animationPlayState = 'running';

Animations multiples

Appliquez plusieurs animations à un même élément en les séparant par des virgules. Chaque animation s’exécute indépendamment.

.icon {
  animation:
    rotate 2s linear infinite,
    pulse 1.5s ease-in-out infinite alternate;
}

Animations décalées avec animation-delay

Décalez les éléments d’une liste en augmentant le délai pour chaque élément. Les propriétés personnalisées CSS facilitent cette opération avec JavaScript.

/* CSS */
.list-item {
  animation: slideIn 0.3s ease forwards;
  animation-delay: calc(var(--index) * 60ms);
}

/* JS */
list.querySelectorAll('.list-item').forEach((el, i) => {
  el.style.setProperty('--index', i);
});

will-change — Indication pour le navigateur

will-change: transform indique au navigateur que la propriété sera animée, ce qui lui permet de placer l’élément sur sa propre couche de composition à l’avance. Utilisez cette propriété avec parcimonie : un trop grand nombre de couches de composition gaspille la mémoire du GPU.

.animated {
  will-change: transform; /* only while animating */
}
/* Remove will-change after animation: */
el.addEventListener('animationend', () => el.style.willChange = 'auto');

En pratique : écran de chargement squelette

Les écrans squelettes utilisent une animation de miroitement pour indiquer que le contenu est en cours de chargement. Un dégradé glisse sur des formes d’espace réservé.

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #edf2f7 50%,
    #e2e8f0 75%
  ) 200% 0 / 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

Vérification rapide

Quelle valeur de animation-fill-mode permet à l’élément de conserver l’état de la dernière image clé après la fin de l’animation ?

Récapitulatif : animations @keyframes

Définissez-les avec @keyframes en utilisant from/to ou des pourcentages. Appliquez-les avec la notation abrégée animation. Utilisez iteration-count pour les répétitions et alternate pour la direction de va-et-vient. Utilisez fill-mode: forwards pour conserver l’état final. Décalez les animations avec animation-delay et des variables CSS. Utilisez des images clés transform et opacity pour des animations composées fluides.

Questions Fréquemment Posées

La leçon « Animations @keyframes » est-elle gratuite ?

Oui — le texte complet de « Animations @keyframes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Animations @keyframes » ?

Définissez des animations en plusieurs étapes avec @keyframes, associez-les avec la notation abrégée animation et contrôlez le nombre d’itérations, la direction et le mode de remplissage. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Animations @keyframes » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Frontend Academy