- Scene
- 03
- Take
- 01
- Level
- Beginner
- Runtime
- ~2 h
CSS Transitions in Depth
How the browser creates, reverses, interrupts and cancels a CSS transition, what can and cannot be animated, and the events that report it. Then button and link feedback for the launch page.
A CSS transition is the simplest motion on the web: you say how long a change should take, and the browser fills in the frames. This phase goes inside it. You learn exactly when the browser decides to start one, which properties it can and cannot animate, what happens when two changes overlap, and which events tell your code that it is over (or that it never will be).
Most transition bugs are not typing mistakes. They are misunderstandings: a transition that plays only one way, a transition: all that animates something nobody meant, a hover that flickers because the element runs away from the pointer, an transitionend that never comes. Each one is shown live here, so you meet it on this page and not at work.
At the end the Lumen Volt launch page gets its first motion: every button and link answers a hover, a press and keyboard focus. It is small, quick and calm, and it is the base that the toast, the drawer and the cart build on.
▶ Roll: 3.1Scene 03 · the brief from Lumen
Lena, QA at Lumen Bikes
“I pressed Reserve and nothing told me it had worked. I pressed it again. Then I was not sure what I had done.”
Lena tests the launch page on two phones: a cheap Android and a 120 Hz iPhone. On the first test run she tapped Reserve the Volt, saw no change at all for a moment and tapped again. The button was working. It did not look like it was.
Kofi opens the stylesheet. Buttons have no hover colour, no pressed state and no focus ring that looks different from the browser default. Mei, the motion designer, has put one line in the spec: hover and press feedback takes 120 milliseconds, with the same curve everywhere.
Ravi adds his rule: the press may shrink a button a little, but for people who ask for less motion the colour change must stay and the shrinking must go. In this phase you learn how a transition really works, and then you build that feedback for every button and link on the page.
In this scene
You will learn
- Say when the browser creates a transition and which style it uses to decide
- Know which properties animate smoothly, which flip at 50%, and which do not animate
- Predict what happens when a transition is reversed, interrupted or cancelled
- Listen for transition events without waiting for ones that never fire
- Give every button and link on the launch page hover, press and focus feedback
You write code in
In the editor on this page (no install); the build adds to your lumen-motion project
Files you touch
- src/styles/components.css
Shot list · 6 shots, widths by reading time
- 3.1Your First TransitionA transition tells the browser to take time over a style change instead of jumping. The browser starts one when a style changes on a frame, and it reads the transition settings from the new style, so the rule must sit on the right selector. 21 min 3 live
- 3.2What Can and Can't TransitionThe browser can blend numbers, lengths, colours and shapes, so those properties transition smoothly. Keyword properties such as display have no in-between, so they flip, and values like height: auto cannot be blended with a length at all. 23 min 3 live
- 3.3Several Properties, Delays and OrderA transition list gives each property its own duration, curve and delay, and shorter lists repeat to fit. Delays turn separate transitions into a sequence, and the transition: all shortcut animates changes nobody planned. 22 min 3 live
- 3.4Reversing and InterruptingWhen a change arrives while a transition is running, the browser starts the new transition from the value on screen. If the change goes back to where it started, the new transition is shortened so the element does not take longer to return than it took to leave. 21 min 3 live
- 3.5Transition Events and Their TrapsFour events report a transition's life: run, start, end and cancel, one set per property. Code that waits for transitionend will wait forever when the transition never starts, is cancelled, or the element is hidden, so every wait needs a way out. 20 min 2 live
- 3.6Build: Button and Link FeedbackbuildGive every button and link on the launch page a hover colour, a quick press and a keyboard focus ring, all in 120 ms with the ease-out token. The colours always change, and the press is skipped for people who ask for less motion. 22 min 1 live
Dailies · 4 checked exercises
A film crew watches the day's shots every evening. Build each one yourself and press Check: the page freezes its clock and checks your motion at exact moments, its cost, and its reduced-motion version.
hot (and on hover), but it changes in one frame.BeginnerD02Name the propertiesThe card uses transition: all 300ms. A script that sets its width makes it grow in a slow, costly layout animation, which nobody asked for.BeginnerD03Fade out, then leave the layoutThe Filters panel is display: none when closed. It appears and disappears in one frame.IntermediateD04Button feedback for the launch pageGive .button a 120 ms hover colour change, a press (scale(0.97) on :active) and a focus ring that only changes colour. Use var(--dur-fast) and var(--ease-out).Intermediate