From the course: CSS: Transforms and Transitions

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Manage transition timing

Manage transition timing - CSS Tutorial

From the course: CSS: Transforms and Transitions

Start my 1-month free trial

Manage transition timing

“

- [Instructor] In the last video, we explored how transitions can slow down the change between an initial state and the end state, but we didn't discuss how those changes were applied. Were they applied all at the same rate, or did the changes occur more quickly at the beginning of the transition interval or more slowly at the end? That's what this video is going to explore by looking at transition timing. The timing of the transition is controlled by adding a timing value to the transition property or with the transition timing property style. In either approach, the timing value will specify the rate at which the transition progresses. Timings can be defined using five key words. Ease, in which the style changes slowly, speeds up in the middle, and then ends slowly. This is the default timing. Linear, which maintains a constant rate of change throughout the duration. Ease-in, which starts slow and then speeds up to the end. Ease-out, which starts fast and then slows down to the end.…

Contents