Movement, shadows and depth
Transitions that make a page feel responsive, transforms that move things cheaply, keyframes for anything that repeats, and how to respect people who cannot tolerate motion.
By the end you can
- Add a transition that makes a control feel responsive
- Move, scale and rotate things without disturbing the layout
- Write a keyframe animation for something that repeats
- Turn all of it off for people who have asked for less motion
Easier if you did first
step 1 of 4
Transitions: softening a change
Without a transition, a hover colour snaps from one to the other instantly. With one, it fades over a moment, and the control feels like something you touched rather than something that flickered.
transition takes three parts: what to animate, how long, and the shape of the movement. transition: background-color 150ms ease.
Two rules keep it looking professional rather than sluggish.
Name the properties, rather than writing transition: all. With all, the browser watches everything, including properties you change later for other reasons, and you get surprise animations in six months.
Keep it short. For a hover or a button press, 120 to 200 milliseconds is right. Anything over about 300ms on a small control starts to feel like the page is lagging.
The last part is the easing: how the speed changes through the movement. ease-out starts quickly and settles, which is what you want for something appearing. linear looks mechanical and is mostly for spinners.
The transition goes on the normal rule, not inside :hover. Put it in :hover and it animates on the way in and snaps back on the way out.
Give the button on the right a smooth hover and a visible focus style.
.button {
background: #0b7d4f;
transition: background-color 150ms ease-out, transform 150ms ease-out;
}
.button:hover {
background: #065f38;
}
.button:active {
transform: translateY(1px); a tiny press
}What these words mean
- transition
- Animate a change in a property over time.
- duration
- How long it takes. 120 to 200ms for small controls.
- easing
- How the speed changes: ease, ease-out, linear.
- transition-delay
- Wait before starting. Useful for dropdown menus.
- :active
- While the control is being pressed.
Easy to get wrong
transition: all 300ms
transition: background-color 150ms ease-out
all animates every property that ever changes, including layout ones that are expensive to animate, and you get strange movement from rules written much later.
Putting the transition inside the :hover rule
On the normal rule
Then it only exists while hovered, so the colour eases in and snaps back the instant the mouse leaves. It looks broken, and the cause is hard to see.
What we check
- There is a transition
- It names the property instead of using all
- The duration is short enough to feel responsive
- There is a keyboard focus style