0Pricing
CSS Academy · Lesson

Animation Direction Fill-Mode and Iteration

Control animation playback direction, how many times it loops, and the final state with fill-mode.

Animation Direction Fill-Mode and Iteration is a free CSS Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

animation-iteration-count

Controls how many times the animation repeats. Use infinite for continuous looping.

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

.pulse {
  animation: pulse 2s ease-in-out 3; /* plays 3 times */
}

animation-direction

Controls the playback direction on alternate cycles:

  • normal — plays forward each iteration
  • reverse — plays backward
  • alternate — forward then backward, alternating
  • alternate-reverse — backward then forward
.bounce {
  animation: bounce 1s ease-in-out alternate infinite;
}

animation-fill-mode

Defines what happens to the element before the animation starts and after it ends:

  • none — default, reverts to original state
  • forwards — holds the last keyframe after completion
  • backwards — applies first keyframe during delay
  • both — applies both backwards and forwards

forwards Fill Mode

The most common use case — keep the element in its animated final state after the animation completes:

.item {
  opacity: 0;
  animation: fadeIn 500ms ease-out forwards;
}
/* Item stays visible after animation ends */

backwards Fill Mode

When there is a delay, backwards makes the element start at the first keyframe state during the delay period, preventing a flash of the original state before animation starts:

.item {
  animation: fadeIn 500ms ease-out 200ms both;
  /* During 200ms delay: already at from state */
}

both Fill Mode

both combines forwards and backwards — the most predictable option for animated elements that should not flash before or after the animation.

animation-delay

Delays the start of an animation. Negative delays make the animation start mid-way through — useful for synchronizing multiple animations:

.item:nth-child(1) { animation-delay: 0s; }
.item:nth-child(2) { animation-delay: 0.1s; }
.item:nth-child(3) { animation-delay: 0.2s; }

Staggered Animation Pattern

CSS-only stagger using nth-child delays:

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

.item {
  animation: slideIn 400ms ease-out both;
}

.item:nth-child(n) {
  animation-delay: calc(n * 60ms);
}

Pausing and Resuming

Toggle the animation state with JavaScript by changing animation-play-state:

el.style.animationPlayState = 'paused';
el.style.animationPlayState = 'running';

Resetting Animations

To replay a CSS animation, remove and re-add the class. The browser applies a trick: force a reflow between removal and addition.

el.classList.remove('animate');
void el.offsetWidth; // force reflow
el.classList.add('animate');

Negative animation-delay

Start an animation mid-playback using a negative delay — useful for synchronized background patterns or looping elements that should appear already in motion.

.star { animation: twinkle 3s ease-in-out infinite; }
.star:nth-child(2) { animation-delay: -1s; } /* 1s into animation */

Quick Check

Which animation-fill-mode value keeps the element at its final keyframe state after the animation ends?

Recap

animation-iteration-count: infinite loops forever. animation-direction: alternate yo-yos. animation-fill-mode: forwards holds the final state. animation-fill-mode: both is the safest option. Use negative delays to offset synchronized animations.

Frequently asked questions

Is the “Animation Direction Fill-Mode and Iteration” lesson free?

Yes — the full text of “Animation Direction Fill-Mode and Iteration” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Animation Direction Fill-Mode and Iteration”?

Control animation playback direction, how many times it loops, and the final state with fill-mode. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Animation Direction Fill-Mode and Iteration” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. @keyframes Syntax and Animation Property
  2. Animation Direction Fill-Mode and Iteration
  3. Chaining and Sequencing Animations
  4. Accessible Animations with prefers-reduced-motion
← Back to CSS Academy