CSS Keyframe Animations & Motion Design
Lesson 29 • Advanced Track
What You'll Learn
💡 Think of It Like This
If CSS transitions are like a dimmer switch (smooth A → B), keyframe animations are like a choreographed dance routine — you define every step: "at 0% do this, at 50% do that, at 100% finish here." You control the entire performance, not just the start and end.
Understanding Keyframe Animations
Transitions only animate between two states (A → B). Keyframe animations let you define an unlimited number of intermediate states at specific percentages (0%, 25%, 50%, 75%, 100%). This makes complex, multi-step sequences possible — things like bouncing, morphing, color cycling, and loading indicators.
A keyframe animation has two parts: the @keyframes rule (which defines the steps) and the animation property (which applies it to an element). Unlike transitions, animations can run automatically on page load — no hover or click required. They can also loop infinitely, alternate direction, and be paused/resumed.
Performance remains critical: The same GPU-optimized properties apply — animate transform and opacity for butter-smooth 60fps. Animating width, height, or top causes layout thrashing and janky performance, especially on mobile.
Animation Properties Reference
| Property | Values | Description | Default |
|---|---|---|---|
| animation-name | bounce | References @keyframes name | none |
| animation-duration | 1s | One cycle length | 0s |
| animation-iteration-count | infinite | 3 | How many times to run | 1 |
| animation-direction | alternate | Forward, reverse, or both | normal |
| animation-fill-mode | forwards | both | Keep final state after ending | none |
| animation-play-state | paused | running | Pause / resume | running |
| animation-delay | 0.2s | Wait before starting | 0s |
@keyframes Basics — Bounce, Pulse, Spin, Fade
The four most common animation patterns are bounce (vertical movement), pulse (scale in/out), spin (continuous rotation), and fade-in (opacity + position). Each uses @keyframes with different percentage stops. The fade card uses animation-fill-mode: both to stay visible after the animation ends.
@keyframes Basics
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; background: #fafafa; }
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0%, 100% { transform: scale(1);
...Animation Properties — Staggering, Triggers, Pausing
animation-delay combined with :nth-child() creates staggered entrances where items slide in one after another. You can also trigger animations on hover (useful for attention effects) and pause infinite animations using animation-play-state: paused — perfect for tickers and carousels.
Animation Properties & Staggering
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; }
@keyframes slideIn {
from { transform: translateX(-100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
.card-list { max-width: 400px; }
.card {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 16px;
margin: 8px 0;
anim
...Multi-Step & Creative Animations
Multi-step keyframes (0%, 25%, 50%, 75%, 100%) create complex sequences. The color morph cycles through five colors while changing border-radius. The skeleton loader uses a gradient shimmer — a production-quality loading indicator used by Facebook, YouTube, and most modern apps. The typing effect combines steps() timing with a blinking cursor.
Multi-Step & Creative Animations
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; }
@keyframes colorShift {
0% { background: #F44336; border-radius: 0; }
25% { background: #FF9800; border-radius: 10px; }
50% { background: #4CAF50; border-radius: 50%; }
75% { background: #2196F3; border-radius: 10px; }
100% { background: #9C27B0; border-radius: 0; }
}
.morph-box {
width:
...Accessibility — prefers-reduced-motion
Some users experience motion sickness, vertigo, or distraction from animations. The @media (prefers-reduced-motion: reduce) query lets you disable or simplify animations for users who've enabled "Reduce motion" in their OS settings. This isn't optional — it's a core accessibility requirement.
Animations & Accessibility
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: system-ui, sans-serif; padding: 24px; }
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animated-card {
background: white;
border: 1px solid #e0
...When to Use Keyframe Animations
- Entrance effects — Fade-in, slide-up, or scale-up elements as they appear on the page.
- Loading indicators — Skeleton screens, spinners, progress animations.
- Attention grabbers — Pulsing badges, bouncing CTAs, notification dots.
- Continuous decoration — Floating elements, gradient shifts, parallax backgrounds.
- Use transitions instead when: You only need A → B on hover/focus — transitions are simpler and more performant for two-state changes.
⚠️ Common Mistakes
- Missing animation-fill-mode — Without
forwardsorboth, the element snaps back to its original state after the animation ends. Usebothto apply the first keyframe during delay and keep the last keyframe after completion. - Animating layout properties — Animating
width,height, ortoptriggers reflow every frame. Usetransformandopacityfor 60fps performance. - Too many simultaneous animations — More than 3-4 animated elements on screen can cause jank on mobile devices. Be selective.
- Ignoring prefers-reduced-motion — Always include a reduced-motion media query. Users with vestibular disorders can experience nausea from animations.
- Forgetting animation-delay on staggered items — Without
animation-fill-mode: both, delayed elements are visible in their pre-animation state before the delay completes. - Using animation where transition suffices — Simple hover effects don't need @keyframes. Use
transitionfor two-state changes — it's simpler and more maintainable.
🎉 Lesson Complete
- ✅
@keyframesdefines multi-step animation sequences at specific percentages - ✅
animation-fill-mode: bothpreserves the first and final states - ✅ Stagger entrances with
animation-delayon nth-child selectors - ✅ Prefer
transformandopacityfor smooth GPU-accelerated performance - ✅
animation-play-state: pausedlets users control continuous animations - ✅
steps()timing creates typewriter and frame-by-frame effects - ✅ Skeleton loaders use gradient shimmer — a professional loading pattern
- ✅ Always include
@media (prefers-reduced-motion: reduce)for accessibility
Sign up for free to track which lessons you've completed and get learning reminders.