From the course: CSS: Animation

Unlock the full course today

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

Timing functions and easing

Timing functions and easing - CSS Tutorial

From the course: CSS: Animation

Start my 1-month free trial

Timing functions and easing

“

- [[Narrator] Easing is one of those things that I don't think web designers talk about enough. The easing you choose has the power to greatly affect the way your animation is perceived and what it communicates. And that makes it an important factor of any animation. By definition, easing is what describes the speed changes of your animation over the course of its duration. Easing is used in many types of animation, and there are almost endless variations of easing functions out there. In CSS, easing is handled by the animation timing function property, or the transition timing function property if you're using transitions. We have three options for defining animation-timing-functions. We have our predefined easing keywords, the steps function, or custom cubic-bezier functions. Let's start our look at easing and CSS with the predefined easing keyword options. The easing keyword options available in CSS are ease,…

Contents