CSS AdvancedLesson 59Free preview

CSS Transitions

This lesson is part of CSS · All levels

Summary

Transitions make changes to the CSS property smoothly run over a certain timeframe, for example when an element is highlighted in a cursor. We determine which properties are animated, their duration, their speed patterns, and their latency. Transitions can be made specific to a single state such as `:hover` so that the effect only occurs when desired.

Key points

Select the animated property, for example
`transition-duration` must be filled in so that the transition is visible, for example `0.3s`
`transition-timing-function` sets the speed curve such as `ease`, `linear`, or `ease-in-out`
`transition-delay` delayed the beginning of the transition; shorthand `transition` wrote it all at once

Full lesson

Code examples and quizzes

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