Upgrading your CSS animations with easing functions

It doesn't take many CSS3 animation blogs to grow bored of the linear transition. You have a couple options to add a little pop to your transitions. The easiest way upgrade your transition, is to swap out linear with a ready made easing functions ease, ease-in, ease-out, ease-in-out. Or, we can take it a step further. These easing functions are easy to remember names for the underlying cubic-bezier curves that control how the animation gets from start to finish:

ease = cubic-bezier(0.25, 0.1, 0.25, 1)
ease-in = cubic-bezier(0.42, 0, 1, 1)
ease-out = cubic-bezier(0, 0, 0.58, 1)
ease-in-out = cubic-bezier(0.42, 0, 0.58, 1)

This would be the functional equivalent of linear:

transition-timing-function: cubic-bezier(0, 0, 1, 1);

For those that are coming from a jQuery animation world, here's the cubic-bezier equivalents to the Easing Plugin:

easeOutCubic = cubic-bezier(.215,.61,.355,1)
easeInOutCubic = cubic-bezier(.645,.045,.355,1)
easeInCirc = cubic-bezier(.6,.04,.98,.335)
easeOutCirc = cubic-bezier(.075,.82,.165,1)
easeInOutCirc' = cubic-bezier(.785,.135,.15,.86)
easeInExpo' = cubic-bezier(.95,.05,.795,.035)
easeOutExpo = cubic-bezier(.19,1,.22,1)
easeInOutExpo = cubic-bezier(1,0,0,1)
easeInQuad = cubic-bezier(.55,.085,.68,.53)
easeOutQuad = cubic-bezier(.25,.46,.45,.94)
easeInOutQuad = cubic-bezier(.455,.03,.515,.955)
easeInQuart = cubic-bezier(.895,.03,.685,.22)
easeOutQuart = cubic-bezier(.165,.84,.44,1)
easeInOutQuart = cubic-bezier(.77,0,.175,1)
easeInQuint = cubic-bezier(.755,.05,.855,.06)
easeOutQuint = cubic-bezier(.23,1,.32,1)
easeInOutQuint = cubic-bezier(.86,0,.07,1)
easeInSine = 'cubic-bezier(.47,0,.745,.715)
easeOutSine = cubic-bezier(.39,.575,.565,1)
easeInOutSine = cubic-bezier(.445,.05,.55,.95)
easeInBack = cubic-bezier(.6,-.28,.735,.045)
easeOutBack = cubic-bezier(.175, .885,.32,1.275)
easeInOutBack = cubic-bezier(.68,-.55,.265,1.55)

Diving one step deeper into customization, you can create your own timing-function on cubic-bezier.com. Tip: if you drag the line out of the bounds of the graph you will create the bounce effect. Hope it helps!