Lesson 13 · Motion and scale

Transitions and animations

A CSS change normally lands on the very next frame: a jump. Add transition: scale 0.3s and the browser spreads the change over 300 ms instead, working out progress and an eased in-between value on every frame. Then write @keyframes with a waypoint at 50%, play it with the animation property, and see why animating a transform such as scale is cheap for the browser to draw.

12 min10 steps5 questionsAdvanced

Fig 13 · Interactive

Loading figure…

or ← →

Check yourself

5 quick questions

Pick an answer to see why. Your score saves with your progress.

01The rule .btn { transition: scale 0.3s; } is in place. What happens when .btn:hover sets scale: 1.2?

A transition watches the named property. When its value changes, the browser draws the in-between values over the duration, 0.3 s = 300 ms, instead of jumping.

02Halfway through a 300 ms transition with the default timing function, ease, how far along is the value?

ease is cubic-bezier(0.25, 0.1, 0.25, 1): quick at first, gentle at the end. At progress 0.50 it gives about 0.80, so scale goes from 1 to 1.16, not 1.10.

03What is the main difference between a transition and a keyframe animation?

A transition waits for a change, such as :hover starting to match. An animation plays its @keyframes as soon as the animation property applies, for example when the page loads.

04@keyframes pulse { 50% { scale: 1.4; } } has no 0% or 100% keyframe. What does the browser use for them?

When the start or end keyframe is missing, the browser builds it from the element's own computed value. Here that is scale 1, so the dot goes 1 → 1.4 → 1.

05Why is animating scale usually cheaper for the browser than animating width?

A frame can need style, layout, paint and composite. Changing width moves other boxes, so layout runs every frame. A transform such as scale does not affect layout, so the browser can skip it, and often paint too.

Key terms

Glossary

Transition: A rule that makes a change to a property happen gradually over a set time, instead of in one jump.
Duration: How long a transition or animation takes, written in seconds (0.3s) or milliseconds (300ms).
Timing function: A curve that turns progress (time passed ÷ duration) into how far along the value is. The default is ease.
Frame: One picture the screen draws. A 60 Hz screen draws a new frame about every 16.7 ms.
@keyframes: An at-rule that names an animation and lists its waypoints, such as 50% { scale: 1.4; }.
Keyframe: One waypoint in an animation: a point in time, as a percentage, and the styles at that point.
Animation (CSS): The animation property plays a named @keyframes over a duration, without waiting for a change.
Transform: A change to how an element is drawn, such as scale or rotate, that does not move the boxes around it.

Fine print

Notes and sources

The figure plays every transition and animation about eight times slower than a real browser, so each frame can be seen.
The value cells update in 50 ms steps for the transition and 100 ms steps for the animation; a real browser computes a new value on every frame.
Screens refresh at different rates (60 Hz is common; 120 Hz screens draw a frame every 8.3 ms). The browser draws one frame per refresh when it can, so a faster screen shows more in-between values.
If the mouse leaves before the 300 ms are over, the browser reverses from the current value and shortens the way back to match (CSS Transitions, reversing shortening).
Whether the browser also skips paint depends on the element having its own compositing layer, which browsers decide for themselves; transforms and opacity are the properties MDN recommends animating.
Some people get dizzy from motion. Wrap large animations in @media (prefers-reduced-motion: no-preference) { … } so they only run for people who have not asked for less motion.
Save the full page as index.html and open it: the dot pulses once when the page loads, and the button grows smoothly when you hover over it and shrinks back when you leave.

Quiz Unlocks after the last step.