MoreLesson 243Free preview

Transition on Hover

This lesson is part of How To · All levels

Summary

CSS transitions make style changes when the hover runs smoothly, not jumps out of nowhere. You define the animated properties, duration, rhythm, and delay on the base element, then change the value in the hover selector. Only the animated properties such as color, background-color, opacity, and transform will transition.

Key points

Write transition on the base selector, not just on the hover, so the animation goes two ways.
Transition-property determines the property being animated; avoid all if not necessary.
Duration 150-300ms feels responsive to changes while hover.
Respect preferences-reduced-motion for users who are sensitive to movement.

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.