Keyframe Animations (@keyframes)
Go beyond simple transitions. Learn how to create complex, multi-step animations and infinite loops using CSS keyframes and timing controls.
Expert Answer & Key Takeaways
Go beyond simple transitions. Learn how to create complex, multi-step animations and infinite loops using CSS keyframes and timing controls.
1. The @keyframes Logic
An animation allows an element to gradually change from one style to another. You define the styles in
@keyframes and then apply that animation to an element.The Example: The Eternal Spinner
/* 1. Define the Movement */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* 2. Apply to the Element */
.loader {
width: 50px;
height: 50px;
border: 5px solid #f3f3f3;
border-top: 5px solid blue;
border-radius: 50%;
/* name | duration | timing | iteration */
animation: spin 1s linear infinite;
}| Property | Description | Common Values |
|---|---|---|
animation-name | Matches the @keyframes name. | spin, fade-in, move-up |
animation-duration | How long for one cycle. | 2s, 500ms |
animation-iteration-count | How many times? | 1, infinite, 5 |
animation-direction | Forward? Backward? | normal, reverse, alternate |
animation-fill-mode | What happens at the end? | forwards, backwards, none |
2. The Persistence Rule: animation-fill-mode
By default, when an animation ends, the element 'snaps' back to its original state. To make it stay at the final frame, you must use
forwards..fade-out {
animation: disappear 1s forwards;
}
@keyframes disappear {
to { opacity: 0; visibility: hidden; }
}3. Multi-Step Animations (%)
Keyframes aren't limited to 'from' and 'to'. You can use percentages to create complex, bouncing, or looping paths.
@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.2); }
100% { transform: scale(1); }
}[!TIP] Pausing on Hover: You can useanimation-play-state: paused;on:hoverto stop a moving element when the user interacts with it.
🎯 Practice Challenge: The Floating Icon
- Create an icon or a div.
- Task 1: Use
@keyframes floatto move the element up and down by20px. - Task 2: Set the
animation-directiontoalternateso it moves smoothly back and forth. - Task 3: Set the
animation-iteration-counttoinfiniteto make it float forever.
[!NOTE] Answer for Task 2/3:animation: float 2s ease-in-out infinite alternate;
4. Senior Interview Corner
Q: Why use
alternate instead of manual 0%, 50%, 100% percentages for a simple loop?A: Maintainability. If you want a ball to bounce up and down, you only need to define the 'Up' state in
to. By using alternate, the browser handles the 'Down' movement for you automatically. If you used percentages, you'd have to duplicate your work at 0% and 100%, making the code harder to read and edit.Q: What is the benefit of
animation-timing-function: steps()?A:
steps() is used for 'non-smooth' animations, like a ticking clock hand or a sprite-sheet character running. Instead of interpolating the movement linearly, it jumps instantly between defined intervals, making it perfect for 'pixel-art' style animations or discrete UI changes.Top Interview Questions
?Interview Question
Q:Which property ensures that an element stays in its final animation state after it finishes?
A:
animation-fill-mode: forwards
?Interview Question
Q:How do you make an animation repeat forever?
A:
animation-iteration-count: infinite
Course4All Engineering Team
Verified ExpertFrontend Architects
Focused on layout performance, modern CSS4+ features, and responsive design, our team provides the blueprint for professional web interfaces.
Pattern: 2026 Ready
Updated: Weekly
Found an issue or have a suggestion?
Help us improve! Report bugs or suggest new features on our Telegram group.