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.