CSS Keyframe Animations
Keyframe animations go beyond transitions - they run automatically, can have multiple steps, loop infinitely, and don't require user interaction. Use them for loading spinners, attention-grabbing effects, and complex multi-step animations.
Keyframe Animation Properties
- @keyframes name { from { } to { } } - Define animation sequence with start and end states
- @keyframes name { 0% { } 50% { } 100% { } } - Multi-step animations with percentage keyframes
- animation-name - References the @keyframes: animation-name: fadeIn
- animation-duration - How long one cycle: animation-duration: 1s
- animation-iteration-count - Repeat count: infinite, 1, 3
- animation-direction - normal, reverse, alternate (ping-pong), alternate-reverse
- animation-fill-mode - forwards (keep end state), backwards (apply start state during delay), both
- animation shorthand - animation: fadeIn 0.5s ease-out forwards
Keyframe Code
/* Fade in */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.5s ease-out forwards; }
/* Pulse */
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.pulse { animation: pulse 2s ease-in-out infinite; }
/* Slide in from left */
@keyframes slideInLeft {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
/* Bounce */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
.bounce { animation: bounce 1s ease infinite; }
/* Staggered entrance - combine with delay */
.card:nth-child(1) { animation: fadeIn 0.5s ease 0.0s forwards; }
.card:nth-child(2) { animation: fadeIn 0.5s ease 0.1s forwards; }
.card:nth-child(3) { animation: fadeIn 0.5s ease 0.2s forwards; }Tip
The staggered entrance pattern - giving each card a different animation-delay (0s, 0.1s, 0.2s...) - creates a professional cascade reveal effect. It transforms a basic list into something that feels polished and designed. Use :nth-child() selectors to apply delays without extra classes.
Transitions for state changes, @keyframes for complex multi-step animations
Common Mistake
Forgetting animation-fill-mode: forwards on entrance animations. Without it, the element animates in beautifully and then immediately jumps back to its original opacity: 0 state - completely invisible. Always add forwards to entrance animations so elements stay visible after animating in.
Practice Task
Create a page section with 4 cards that reveal on load with staggered delays: (1) Define @keyframes fadeUp with opacity: 0 + translateY(30px) → opacity: 1 + translateY(0), (2) Apply animation: fadeUp 0.5s ease forwards to each card, (3) Use :nth-child(1) through (4) to add 0s, 0.1s, 0.2s, 0.3s delays.
Quick Quiz
Key Takeaways
- Keyframe animations go beyond transitions - they run automatically, can have multiple steps, loop infinitely, and don't require user interaction.
- @keyframes name { from { } to { } } - Define animation sequence with start and end states
- @keyframes name { 0% { } 50% { } 100% { } } - Multi-step animations with percentage keyframes
- animation-name - References the @keyframes: animation-name: fadeIn