CSS Motion Design Basics: Easing

Some useful rules for applying CSS easing to motion design for UI elements and animations, courtesy of Rachel Smith:

Motion Onto The Stage

As a general rule, when moving something into the viewport, use ease out:

div.inwards { left: 80%; transition: 1s left cubic-bezier(0.21, 0.61, 0.35, 1); }

You could also use the built-in ease-out keyword, but that is simply a predetermined, default value for the cubic-bezier function shown above; it’s much better to build the element’s own unique easing style.

If wish to visualize this, or design your own easing variations, I've left links for each function graphed in Lea Verou’s wonderful interactive cubic-bezier tool.

Motion Off The Stage

When moving something out of the viewport, use ease in:

div.outwards { left: -20%; transition: 1s left cubic-bezier(0.55, 0.05, 0.67, 0.19); }

Note that these terms are opposite to the motion: element outwards → ease-in, element inwards → ease-out.

Motion Across The Stage

If you’re moving something across the viewport, use ease-in-out:

div.across { left: 75%; transition: 1s left cubic-bezier(0.645, 0.045, 0.355, 1); }

Adherence to simple, fundamental rules of motion recreates the laws of physics we experience every day, including friction and inertia, resulting in motion design in your site or app that feels “natural” and real.

In the next article, I’ll look at transitions between CSS animations in motion design.