What can and can't transition
Only real in-between values (a) transition by default. auto (b) and display (c) jump. With allow-discrete (d), a display transition runs: the element stays visible for 0.2s and then disappears, which is what lets an exit fade finish.
A transition tells the browser to animate a property smoothly from its old value to its new value whenever that value changes, with a chosen duration, timing function and delay; only properties whose values can be blended in between can transition.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Make a link whose underline colour fades from transparent to crimson over 0.25s when hovered, and fades back when the mouse leaves.
Write a .tooltip that is invisible (opacity: 0) and fades in over 0.2s, but only after a 0.4s delay, when its parent .has-tip is hovered. It should disappear instantly (no delay) when the mouse leaves.
Log done to the console when a .bar finishes transitioning its width from 0 to 100%, triggered by adding a class full in JavaScript.
Explain it without notes
What is a CSS transition, and what are its four parts?
Why should a hover transition be declared on the element's normal state rather than on :hover?
Which properties can be transitioned, and why can't height: auto or display transition by default?
Why does a transition sometimes not run when you add a class from JavaScript, and how do you fix it?
What do transitionrun, transitionstart, transitionend and transitioncancel mean?
Preview
Console
Nothing logged yet.Expected console output
a (length to length): 1
b (length to auto): 0
c (display, default): 0
d (display, allow-discrete): 1