Beyond the built-in easing keywords

CSS ships with a handful of easing keywords—ease, ease-in, ease-out, and linear—each mapped to a predefined cubic Bézier curve. But those defaults only get you so far. When you want an animation with more distinct personality, or when you're driving animations from JavaScript or the Web Animations API, you need your own timing curves.

Making your own Bézier curves

A cubic Bézier curve is defined by four values, representing two control points. Each point has an X and Y coordinate. The curve itself starts at (0, 0) and ends at (1, 1), and the two control points sit between them. The X values of both control points must fall between 0 and 1; the Y values may exceed that range, although the specification doesn't spell out how far beyond it you can go.

Where you place those control points determines how the animation behaves. A first control point positioned lower-right makes the animation start slowly; upper-left makes it start quickly. A second control point in the bottom-right accelerates the end of the animation, while upper-left slows it down.

Here's a comparison of a standard ease-in-out curve and a custom variant:

Ease-in-out animation curve.

Custom animation curve.

See an animation with custom easing

The CSS for a custom curve looks like this:

transition: transform 500ms cubic-bezier(0.465, 0.183, 0.153, 0.946);

The first two numbers give the X and Y coordinates of the first control point; the second two give the second point's coordinates.

Take the custom curve above as an example: it's close to a classic ease-in-out, but the ease-in portion is shortened and the deceleration at the end is drawn out. A small shift in the control points changes the entire feel of the motion. You can experiment with the animation curve tool to see how tweaking the points affects a live animation.

When JavaScript gives you more range

Cubic Bézier curves are powerful, but not everything fits within them. Effects like a bouncy elastic motion are difficult to replicate in CSS or with Web Animations. For timing like that, a JavaScript animation library is the practical route, because most of them support easing functions beyond what the platform's built-in curves allow.

TweenMax

GreenSock's TweenMax is one such framework; TweenLite is the lighter alternative. Both rest on a mature codebase and give you granular control over animation timing.

See an elastic ease animation

Include the library in your page to get started:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>

Once it's loaded, call TweenMax on the element you want to animate, pick the properties to change, and specify an easing option. The call below uses an elastic ease-out:

    var box = document.getElementById('my-box');
    var animationDurationInSeconds = 1.5;

    TweenMax.to(box, animationDurationInSeconds, {
      x: '100%',
      ease: 'Elastic.easeOut'
    });

The TweenMax documentation covers all the available easing types, and it's worth consulting before you settle on a particular curve for your project.