CSS Animations

Imagine being flipbook artist. You draw a series of sticky note drawings: on page one, a stick figure stands still. On page ten, they take a step forward. On page twenty, they jump in the air. When you flip the pages rapidly, the static drawings merge into a smooth, moving cartoon. CSS animations are those digital flipbooks. They allow you to define a timeline of custom visual states (called @keyframes) and animate elements through those states automatically without requiring user interactions.

In this page:

Declaring @keyframes Timelines
Applying custom Animations
Controlling Iteration Counts
Controlling Directions
Managing Fill Modes (animation-fill-mode)

Declaring @keyframes Timelines

The @keyframes rule is used to define the states and timeline of your animation. You specify keyframes using percentage indicators (from 0% to 100%) or simple keyword hooks (from and to) to define which CSS properties change at different moments.

Note: Use percentage indicators in your keyframes to build complex, multi-state animations.

Warning: Make sure you give your keyframe timeline a descriptive, unique name to prevent animation conflicts.

Example: Declaring @keyframes Timelines

css

<style>
@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.box {
  background: teal;
  color: white;
  padding: 10px;
  animation: fade 2s;
}
</style>
<div class="box">Fades in using the keyframes above</div>

Applying custom Animations

Once you have declared your keyframe timeline, you apply it to an element using the animation-name and animation-duration properties. This instructs the browser to run your custom animation timeline immediately. Adding a timing function such as animation-timing-function: ease-in-out alongside animation-name and animation-duration controls the pacing of the motion, easing it in and out rather than moving at a constant linear speed.

Note: Always specify a defined duration value, or your animation will default to 0 and fail to run.

Warning: Be careful when running heavy animations on page load, as they can slow down performance on mobile devices.

Example: Applying custom Animations

css

<style>
@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.box {
  background: teal;
  color: white;
  padding: 10px;
  animation-name: fade;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
}
</style>
<div class="box">Fades in on load</div>

Controlling Iteration Counts

By default, animations run exactly once and then stop. The animation-iteration-count property allows you to specify how many times you want the animation to repeat, or set it to infinite to loop it forever. The animation-play-state property lets you pause and resume an animation at any point, most commonly toggled to paused on :hover so a user can freeze a looping animation to inspect it.

Note: Use infinite loops on subtle loading spinners to keep them spinning continuously.

Warning: Looping rapid, flashing animations can be distracting and should be avoided.

Example: Controlling Iteration Counts

css

<style>
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  background: coral;
  color: white;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin 1s infinite;
}
.spinner:hover {
  animation-play-state: paused;
}
</style>
<div class="spinner">Spins forever, hover to pause</div>

Controlling Directions

The animation-direction property specifies how your animation timeline should play, offering normal, reverse (plays backward), alternate (plays forward then backward), and alternate-reverse options.

Note: Use the alternate direction setting to create smooth, natural-looking back-and-forth animations.

Warning: Test your alternate loops to make sure the start and end states transition smoothly without jarring snaps.

Example: Controlling Directions

css

<style>
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(50px); }
}
.box {
  background: royalblue;
  color: white;
  padding: 10px;
  animation: slide 1s alternate infinite;
}
</style>
<div class="box">Plays forward, then backward, then forward again</div>

Managing Fill Modes (animation-fill-mode)

By default, when an animation finishes playing, the element snaps instantly back to its original pre-animated styles. The animation-fill-mode property allows you to instruct the browser to apply the animation's start or end styles permanently after it plays.

Note: Set your fill-mode to forwards to make your elements keep their final animated styles after the animation finishes playing.

Warning: Failing to manage fill modes can cause elements to snap back awkwardly once their animations finish.

Example: Managing Fill Modes (animation-fill-mode)

css

<style>
@keyframes slideIn {
  from { transform: translateX(-100px); }
  to { transform: translateX(0); }
}
.box {
  background: royalblue;
  color: white;
  padding: 10px;
  animation: slideIn 1s forwards;
}
</style>
<div class="box">Keeps its final position after the animation ends</div>

Common Mistakes

Forgetting to specify a defined animation-duration, leaving the animation disabled at 0.
Allowing elements to snap back awkwardly by neglecting animation-fill-mode settings.
Attempting to auto-play rapid, flashing animations that can distract users or trigger accessibility issues.

Chapter Summary

The @keyframes rule is used to define the states and timeline of your custom animation.
Configure your animations using properties: animation-name, duration, iteration-count, direction, and fill-mode.
Set your animation-fill-mode to forwards to make your elements keep their final animated styles after the animation finishes playing.

Browser Support

Standard CSS keyframe animations and core control properties are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Transitions Next Lesson → CSS Image Styling