CSS · Module 22 · Lesson 40 of 48

Keyframes & Custom Animations

What is a CSS Animation?

Imagine a flipbook animation. You draw a starting circle on page 1, a larger circle on page 10, and a glowing circle on page 20. When you flip the pages, the circle grows and glows smoothly.

In CSS, Keyframe Animations allow you to build complex, multi-step animations that can loop infinitely or run a specific number of times. While transitions only animate from state A to state B, animations allow you to design step-by-step keyframe timelines (from 0% to 100%).

Why does it matter?

Keyframe animations are used for loading spinners, floating headers, pulsating notification badges, and background color shifts. They run automatically on page load without needing any JavaScript triggers.

Syntax Breakdown

1. Define the Keyframes:

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

2. Apply to the Selector:

.circle {
  animation: pulse 2s infinite;
}

In this example, the circle will run the pulse keyframe timeline over a duration of 2 seconds, looping infinitely.

Common Mistakes

Mismatching animation names: The name you write in the @keyframes rule must match the name in the animation-name property *exactly*, including capital letters (it is case-sensitive!).

Forgetting to set duration: If you write animation: pulse; without specifying a duration (like 2s), the animation will default to 0s and will never run!

Quick Reference

@keyframes — Defines the step-by-step animation timeline.

animation — Shorthand for name, duration, direction, and loop count.

infinite — Keyword to loop the animation forever.

Your Task

Configure the `.circle` element to run the animation `pulse` over a duration of `2s` infinitely.

index.html

Type code above to start the lesson.

Live Preview