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)

Syntax

css

@keyframes animation-name {
  from { property: value; }
  to { property: value; }
}
selector {
  animation: animation-name duration timing-function iteration-count;
}

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.
Accepted values:
animation-name — name of a @keyframes rule
animation-duration — time such as 2s or 500ms
animation-timing-function — ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
animation-iteration-count — number | infinite
animation-direction — normal | reverse | alternate | alternate-reverse
animation-fill-mode — none | forwards | backwards | both

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.
Accepted values:
animation-name: <keyframes-name> — the @keyframes rule to use
animation-duration: <time> — length of one cycle
animation-timing-function: ease | linear | cubic-bezier() — pacing
animation-delay: <time> — wait before starting
animation: name 2s ease 0s — shorthand

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.
Accepted values:
animation-iteration-count: 1 — default, plays once
animation-iteration-count: <number> — plays that many times (decimals allowed)
animation-iteration-count: infinite — loops forever
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.
Accepted values:
normal — default, forwards each cycle
reverse — backwards each cycle
alternate — forwards then backwards
alternate-reverse — backwards then forwards
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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.
Accepted values:
none — default, no styles applied outside the animation
forwards — keeps the last keyframe after the end
backwards — applies the first keyframe during the delay
both — applies both behaviors
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

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>

Live Example

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

CSS Animations

Declaring @keyframes Timelines

Applying custom Animations

Controlling Iteration Counts

Controlling Directions

Managing Fill Modes (animation-fill-mode)

Chapter Quiz — Complete all 22 topics to unlock

Login to run this code