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.