Transition events, in order
transitionrun fires as soon as the class changes, transitionstart after the 0.1s delay, transitionend when the box reaches 200px. elapsedTime never counts the delay, so it is 0 at the start and the duration (0.3) at the end. Delete the box.offsetWidth line: the box may skip straight to 200px, because the browser never saw the 100px value.
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
property: width | duration: 0.3s
easing: ease-out | delay: 0.1s
transitionrun width 0
transitionstart width 0
transitionend width 0.3
final width: 200px