What are keyframes?

Learn the @keyframes rule and animation basics.

What is @keyframes?

The heart of CSS animations is the @keyframes block. You define an animation's start, end, and in-between steps here. Each @keyframes block takes a name: @keyframes spin { ... }. That name is later bound to an element with animation-name.

Inside, you write at least two steps: from for the start, to for the end. Percentages also work: 0% and 100%. One short block can bring any element to life.

Percentages instead of from/to

from and to are for two-step animations only. When you need more steps, use percentages: 0%, 50%, 100%. This lets you define intermediate stops.

A pulse animation, for example, can have three steps: small at start, large in middle, small again at end. Percentage steps build these motions. from equals 0%; to equals 100%.

Exercise Write the pulse animation

We want a .notice element to pulse. Write a @keyframes block named pulse. In the from step set transform: scale(1), in the to step set transform: scale(1.1).

Show example solution

/* pulse animation */
@keyframes pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

Test yourself

Which one is a valid @keyframes block?
```
/* ??? */
```
- keyframes: spin { from { opacity: 0; } to { opacity: 1; } }
- animation: spin { from { opacity: 0; } to { opacity: 1; } }
- @keyframes { from { opacity: 0; } to { opacity: 1; } }
- @keyframes spin { from { opacity: 0; } to { opacity: 1; } }
Show answer

@keyframes spin { from { opacity: 0; } to { opacity: 1; } } — Correct. After @keyframes comes the name, then from and to steps in braces.
Match each keyframe value to its meaning

from

Start step
to

End step
0%

Start (percentage)
100%

End (percentage)
50%

Middle step

Complete the @keyframes name

@keyframes ____ {
  from { opacity: 0; }
  to   { opacity: 1; }
}

Show answer

@keyframes spin {
  from { opacity: 0; }
  to   { opacity: 1; }
}

What does 50% represent in an animation?
```
@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}
```
- The start of the animation
- The speed of the animation
- The middle of the animation
- The end of the animation
Show answer

The middle of the animation — Correct. 50% represents the middle of the animation.

Next lesson: Animation-name and duration

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies