0Pricing
CSS Academy · Leçon

Direction, mode de remplissage et répétition des animations

Contrôlez le sens de lecture d’une animation, le nombre de ses répétitions et son état final avec fill-mode.

Direction, mode de remplissage et répétition des animations est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.

Nombre de répétitions de l’animation

Contrôle le nombre de répétitions de l’animation. Utilisez infinite pour créer une boucle continue.

<div class="spinner"></div>
<div class="pulse"></div>

Direction de l’animation

Contrôle la direction de lecture lors des cycles alternés :

  • normal — lit l’animation vers l’avant à chaque répétition
  • reverse — lit l’animation vers l’arrière
  • alternate — vers l’avant puis vers l’arrière, en alternance
  • alternate-reverse — vers l’arrière puis vers l’avant
<div class="bounce"></div>

Mode de remplissage de l’animation

Définit ce qui arrive à l’élément avant le début de l’animation et après sa fin :

  • none — valeur par défaut, revient à l’état initial
  • forwards — conserve la dernière image clé une fois l’animation terminée
  • backwards — applique la première image clé pendant le délai
  • both — applique les deux modes, vers l’arrière et vers l’avant

Mode de remplissage vers l’avant

Le cas d’usage le plus courant consiste à conserver l’élément dans son état final animé une fois l’animation terminée :

<p class="item">I fade in and stay visible</p>

Mode de remplissage vers l’arrière

Lorsqu’un délai est défini, le mode backwards fait commencer l’élément dans l’état de sa première image clé pendant le délai, ce qui évite l’apparition soudaine de l’état initial avant le début de l’animation :

<p class="item">Starts invisible during the delay</p>

Mode de remplissage dans les deux sens

both combine les modes vers l’avant et vers l’arrière : c’est l’option la plus prévisible pour les éléments animés qui ne doivent pas clignoter avant ou après l’animation.

Délai de l’animation

Retarde le début d’une animation. Les délais négatifs font commencer l’animation à mi-parcours, ce qui est utile pour synchroniser plusieurs animations :

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>

Modèle d’animation décalée

Décalage réalisé uniquement en CSS à l’aide de délais appliqués selon la position de l’élément enfant :

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>

Mise en pause et reprise

Basculez l’état de l’animation avec JavaScript en modifiant animation-play-state :

<div class="spinner" id="js-spinner"></div>
<button onclick="const s=document.getElementById('js-spinner').style; s.animationPlayState = s.animationPlayState === 'paused' ? 'running' : 'paused';">Pause / Resume</button>

Réinitialisation des animations

Pour rejouer une animation CSS, supprimez la classe puis ajoutez-la de nouveau. Le navigateur applique une astuce : forcez un recalcul de la mise en page entre la suppression et l’ajout.

<div class="box" id="reset-box"></div>
<button onclick="const el=document.getElementById('reset-box'); el.classList.remove('animate'); void el.offsetWidth; el.classList.add('animate');">Replay Animation</button>

Délai d’animation négatif

Faites commencer une animation en cours de lecture grâce à un délai négatif. Cette technique est utile pour les motifs d’arrière-plan synchronisés ou les éléments en boucle qui doivent sembler déjà en mouvement.

<div class="star"></div>
<div class="star"></div>
<div class="star"></div>

Vérification rapide

Quelle valeur du mode de remplissage de l’animation conserve l’élément dans l’état de sa dernière image clé une fois l’animation terminée ?

Récapitulatif

animation-iteration-count: infinite boucle indéfiniment. animation-direction: alternate produit un effet de va-et-vient. animation-fill-mode: forwards conserve l’état final. animation-fill-mode: both est l’option la plus sûre. Utilisez des délais négatifs pour décaler des animations synchronisées.

Questions Fréquemment Posées

La leçon « Direction, mode de remplissage et répétition des animations » est-elle gratuite ?

Oui — le texte complet de « Direction, mode de remplissage et répétition des animations » 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 CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Direction, mode de remplissage et répétition des animations » ?

Contrôlez le sens de lecture d’une animation, le nombre de ses répétitions et son état final avec fill-mode. Tu pratiques CSS 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 CSS Academy ?

Aucune expérience préalable n'est requise. CSS 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 2 sur 4.

Combien de temps prend la leçon « Direction, mode de remplissage et répétition des animations » ?

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 CSS Academy ?

Oui. Chaque leçon CSS 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

  1. Syntaxe de @keyframes et propriété d’animation
  2. Direction, mode de remplissage et répétition des animations
  3. Chaînage et séquençage des animations
  4. Animations accessibles avec prefers-reduced-motion
← Retour à CSS Academy