Understand Easing: CSS Animation Techniques


show more Understanding easing provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013) show less
please wait ...

Understanding easing

Easing is one of those things that I don't think web designers talk about enough. It's only one aspect of any given animation, but the easing you choose has the power to greatly affect the way your animation comes across. So it's a really important factor. By definition, easing is the way speed is distributed across the duration of our animation. In CSS all easing is handled with the animation-timing-function property. We have three options for defining animation-timing functions, predefined keywords, our own cubic Bezier curves, and steps. While steps are certainly an option for this property, they have their own distinctive concept which doesn't involve easing at all.

We'll be talking about them later in their very own tutorial. There's still plenty of easing to talk about, though. Let's look at our pre-defined keyword options in more detail first to get a better picture of what's going on behind the scenes. Our pre-defined keywords are ease, which is the default, ...

Understanding easing
Video duration: 8m 47s 1h 56m Intermediate

Viewers:

Understanding easing provides you with in-depth training on Web. Taught by Val Head as part of the CSS: Animations (2013)

Subject:
Web
Software:
CSS
Author:
please wait ...