Animating with easing

Animation easing is the technique of adding acceleration or deceleration at different points during the animation to provide smoother transitions. It may also cause the transformation to exceed the destined value before returning to its final state. For example, when animating a change in height of an element, a bouncing effect could be achieved by causing the animation to overshoot the final value, then undershoot, then settle at the final value.

Fortunately, YUI3 includes many built-in easing types that we can add to our animations with very little extra code. In this example, we will use the bounce-out easing behavior in conjunction with a resize animation. This will make the bounds of the box appear to bounce as they reach the end of the animation.

A complete list of the many easing behaviors that are available in YUI3 is available at the following URL:

http://developer.yahoo.com/yui/3/api/Easing.html

Here, we can see the key steps in this animation by looking...