Quest 2 • Lesson 1
🎨 CSS Animations & Transitions
Make your websites come alive with smooth animations and interactive transitions.
Transitions smooth out changes between states (e.g., hover). Animations are more complex – they can loop, change multiple properties, and run without user interaction.
"CSS transitions are like a car accelerating smoothly. CSS animations are like a rollercoaster – they can go up, down, loop, and have multiple stages."
🚀 Live Demo
Hover over the box or click a button to see different animations.
Hover me
💡 Hover the box to see the transition effect (scale + rotate + colour change).
🧠 CSS Transitions (Hover Effect)
.demo-box {
transition: transform 0.3s ease, background 0.3s ease;
}
.demo-box:hover {
transform: scale(1.1) rotate(5deg);
background: #8b5cf6;
}
transition: transform 0.3s ease, background 0.3s ease;
}
.demo-box:hover {
transform: scale(1.1) rotate(5deg);
background: #8b5cf6;
}
transition– defines which properties to animate, duration, and timing.transform– scale, rotate, translate, skew.ease– smooth start/end. Other options:linear,ease-in,ease-out.
🌀 Keyframe Animations
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.15); background: #ef4444; }
100% { transform: scale(1); }
}
.demo-box.pulse {
animation: pulse 1.5s ease-in-out infinite;
}
0% { transform: scale(1); }
50% { transform: scale(1.15); background: #ef4444; }
100% { transform: scale(1); }
}
.demo-box.pulse {
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes– defines the animation stages (0%, 50%, 100%).animation– shorthand: name, duration, timing, iteration count.infinite– loops forever. Other options:1,2,alternate.
animations.css
/* Transition (hover) */
.box { transition: all 0.3s ease; }
.box:hover { transform: scale(1.1); }
/* Keyframe animation */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.box.bounce {
animation: bounce 1s ease-in-out infinite;
}
.box { transition: all 0.3s ease; }
.box:hover { transform: scale(1.1); }
/* Keyframe animation */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.box.bounce {
animation: bounce 1s ease-in-out infinite;
}
✨ Challenge: Create a Loading Spinner
Create a circular spinner that rotates continuously using @keyframes.
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid #e2e8f0;
border-top: 4px solid #3b82f6;
border-radius: 50%;
animation: spin 1s linear infinite;
}
✅ You've built a spinner! This is how most loading spinners work – rotate a border.
➡️ Next Lesson
Lesson 2.2: Responsive Design (Media Queries) – build mobile‑first websites.
Continue to Lesson 2.2 →(Coming soon – check back or buy Pro Pack for early access)
❤️ Support Free Education
This course is 100% free. If it helps you, consider buying me a coffee.
☕ Buy Me a Coffee