A small boat on a lake at sunset

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); 
}
Graph this transition

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); 
}
Graph this transition

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); 
}
Graph this transition

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.

Photograph by Chris Bird, used under a Creative Commons license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.