Property
Only animate the CSS properties that actually need motion.
Platform under construction
Transitions
Transitions make state changes feel intentional. They smooth the jump between one CSS value and another without turning the interface into a show.
.button { transition: transform 180ms ease, background-color 180ms ease; }
.button:hover { transform: translateY(-2px); }
Motion mental model
Transitions are for state changes, not decoration by default.
A transition tells the browser to animate the change between two values. A button background can fade, a card can lift, a border can brighten and a menu underline can grow.
The important word is change. A transition does not start by itself. It reacts when a property changes through hover, focus, an added class, a media query or JavaScript.
Good transitions are short, specific and useful. They make the interface feel responsive. Slow or vague transitions make the page feel heavy.
Duration
Most interface transitions live between 120ms and 260ms.
Easing
Easing controls the acceleration and emotional feel of the change.
Trigger
The change can come from hover, focus, active, class changes or state attributes.
Visual model
See the interaction sequence before writing the motion.
Resting state
The component waits in its default visual state.
State changes
Hover, focus or a class updates a value.
Browser interpolates
The browser draws the values between start and end.
New state
The component lands in its changed state.
Good CSS versus fragile CSS
Specific transition
.button {
transition: transform 160ms ease,
background-color 160ms ease,
border-color 160ms ease;
}
.button:hover { transform: translateY(-2px); }Too broad and too slow
.button {
transition: all 2s ease;
}
.button:hover { width: 300px; margin-left: 80px; }Rules of thumb
Motion should guide attention, confirm state and stay out of the way.
Animate specific properties
Write the properties by name so future CSS changes do not accidentally animate.
Keep interaction fast
Hover and focus feedback should feel instant, usually below 250ms.
Prefer composite properties
Transform and opacity are usually smoother than width, height, top or left.
Match the state
A tiny hover lift needs a tiny duration; a panel reveal can be slightly longer.
Avoid transition: all
It hides intent and can animate expensive or unexpected properties later.
Test repeated use
A transition that feels nice once can feel annoying after the twentieth click.
Production thinking
Good animation is fast, purposeful, accessible and testable.
Why does this matter?
Transitions help users perceive cause and effect. They show that the interface responded to their action instead of snapping randomly.
Accessibility
Short transitions are usually fine, but users with vestibular sensitivity may still prefer reduced motion. Pair larger movement with a reduced-motion fallback.
Production note
Define motion tokens such as --motion-fast and --ease-standard once the design system grows.
SEO note
Transitions do not rank pages by themselves, but good interaction polish improves perceived quality and engagement.
Live code lab
Change the CSS and watch the interface respond.
The preview runs in an isolated iframe. Links and forms stay inside the practice area, so you can experiment without leaving the lesson.
Mini assignment
Try this now.
- Change 180ms to 700ms and feel how slow interaction becomes.
- Replace the transition properties with all and explain why that is less controlled.
- Add border-color to hover and include it explicitly in transition.
Practice assignment
Do this before moving to the next lesson.
- Style a button with hover, active and focus-visible states.
- Transition only transform, background-color and border-color.
- Write one sentence explaining why transition: all can become technical debt.
Try it yourself
Create a responsive hover transition
Self-check
Before you continue, prove that you understand Transitions.
Answer these questions before moving on. If the motion has no purpose, no fallback or no state clarity, it is not production motion yet.
- Can you explain what a transition needs before it can run?
- Can you choose a duration that feels responsive?
- Can you name three properties that are safer to transition?
- Can you avoid transition: all in production CSS?
- Can you add a reduced-motion fallback when motion becomes large?
Senior audit upgrade
Motion tokens make transitions consistent.
Timing and easing should not be random. A few reusable motion tokens keep interaction polish controlled.
Fast
--motion-fast for tiny feedback such as hover color.
Standard
--motion-standard for panel, menu and card state changes.
Easing
Use easing to make motion feel responsive instead of robotic.
:root {
--motion-fast: 120ms;
--motion-standard: 220ms;
--ease-out: cubic-bezier(.2, .8, .2, 1);
}