Easing curves side by side
All six move the same distance in the same 1.2s; only the speed along the way differs. The custom property --e passes each easing into one shared rule.
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.