JavaScript Curriculum
Transitions and Animations
mediumThe coffee shop site looks great but feels static. Hovering a card, clicking a button, loading the page — these moments deserve motion. Let's add polish without going overboard.
Transitions and Animations
CSS motion is about communication — a hover state that responds, a card that lifts, a modal that slides in. Done well, it makes your UI feel alive. Done poorly, it feels distracting. The key is restraint: smooth, purposeful, fast.
Transitions — Smooth State Changes
A transition animates between two CSS states (like :hover). You define what to animate, how long, with what easing, and after what delay:
Slow start, fast middle, slow end. Natural feel.
.button {
transition: all 300ms ease;
}
.button:hover {
background: #1f6feb;
color: white;
transform: translateY(-4px) scale(1.02);
box-shadow: 0 8px 24px rgba(31,111,235,0.4);
}@keyframes — Full Animations
When you need more than two states, @keyframes lets you define an animation timeline with as many steps as you need:
opacity: 0 → 1. The most common entrance animation.
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}Usage.element {
animation: fadeIn 600ms ease-out forwards;
}Respecting Reduced Motion
Some users experience nausea, dizziness, or seizures from motion on screen. CSS gives us a media query to detect their preference:
Animation plays regardless of user preferences. Fails WCAG 2.1 SC 2.3.3.
.hero-element {
animation: slideIn 600ms ease-out;
}
/* No reduced-motion consideration */Your Challenge
Add purposeful motion to the coffee shop page with transitions, an entrance animation, and full reduced-motion support.
Challenge
Add transitions to all interactive elements on the coffee shop page: card hover (lift + shadow), button hover (colour shift), nav links (underline grows). Then add a fade-in slide-up entrance animation to the hero heading. Wrap all animations in prefers-reduced-motion: no-preference.
Transitions and Animations
mediumThe coffee shop site looks great but feels static. Hovering a card, clicking a button, loading the page — these moments deserve motion. Let's add polish without going overboard.
Transitions and Animations
CSS motion is about communication — a hover state that responds, a card that lifts, a modal that slides in. Done well, it makes your UI feel alive. Done poorly, it feels distracting. The key is restraint: smooth, purposeful, fast.
Transitions — Smooth State Changes
A transition animates between two CSS states (like :hover). You define what to animate, how long, with what easing, and after what delay:
Slow start, fast middle, slow end. Natural feel.
.button {
transition: all 300ms ease;
}
.button:hover {
background: #1f6feb;
color: white;
transform: translateY(-4px) scale(1.02);
box-shadow: 0 8px 24px rgba(31,111,235,0.4);
}@keyframes — Full Animations
When you need more than two states, @keyframes lets you define an animation timeline with as many steps as you need:
opacity: 0 → 1. The most common entrance animation.
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}Usage.element {
animation: fadeIn 600ms ease-out forwards;
}Respecting Reduced Motion
Some users experience nausea, dizziness, or seizures from motion on screen. CSS gives us a media query to detect their preference:
Animation plays regardless of user preferences. Fails WCAG 2.1 SC 2.3.3.
.hero-element {
animation: slideIn 600ms ease-out;
}
/* No reduced-motion consideration */Your Challenge
Add purposeful motion to the coffee shop page with transitions, an entrance animation, and full reduced-motion support.
Challenge
Add transitions to all interactive elements on the coffee shop page: card hover (lift + shadow), button hover (colour shift), nav links (underline grows). Then add a fade-in slide-up entrance animation to the hero heading. Wrap all animations in prefers-reduced-motion: no-preference.