css-easing

a css cheatsheet with easing functions

cubic-bezier.com github

Sine

easeInSine

transition: 0.6s cubic-bezier(0.12, 0, 0.39, 0);

demo

compare

this function

linear

easeOutSine

transition: 0.6s cubic-bezier(0.61, 1, 0.88, 1);

demo

compare

this function

linear

easeInOutSine

transition: 0.6s cubic-bezier(0.37, 0, 0.63, 1);

demo

compare

this function

linear

Cubic

easeInCubic

transition: 0.6s cubic-bezier(0.32, 0, 0.67, 0);

demo

compare

this function

linear

easeOutCubic

transition: 0.6s cubic-bezier(0.33, 1, 0.68, 1);

demo

compare

this function

linear

easeInOutCubic

transition: 0.6s cubic-bezier(0.65, 0, 0.35, 1);

demo

compare

this function

linear

Quint

easeInQuint

transition: 0.6s cubic-bezier(0.64, 0, 0.78, 0);

demo

compare

this function

linear

easeOutQuint

transition: 0.6s cubic-bezier(0.22, 1, 0.36, 1);

demo

compare

this function

linear

easeInOutQuint

transition: 0.6s cubic-bezier(0.83, 0, 0.17, 1);

demo

compare

this function

linear

Circ

easeInCirc

transition: 0.6s cubic-bezier(0.55, 0, 1, 0.45);

demo

compare

this function

linear

easeOutCirc

transition: 0.6s cubic-bezier(0, 0.55, 0.45, 1);

demo

compare

this function

linear

easeInOutCirc

transition: 0.6s cubic-bezier(0.85, 0, 0.15, 1);

demo

compare

this function

linear

Quad

easeInQuad

transition: 0.6s cubic-bezier(0.11, 0, 0.5, 0);

demo

compare

this function

linear

easeOutQuad

transition: 0.6s cubic-bezier(0.5, 1, 0.89, 1);

demo

compare

this function

linear

easeInOutQuad

transition: 0.6s cubic-bezier(0.45, 0, 0.55, 1);

demo

compare

this function

linear

Quart

easeInQuart

transition: 0.6s cubic-bezier(0.5, 0, 0.75, 0);

demo

compare

this function

linear

easeOutQuart

transition: 0.6s cubic-bezier(0.25, 1, 0.5, 1);

demo

compare

this function

linear

easeInOutQuart

transition: 0.6s cubic-bezier(0.76, 0, 0.24, 1);

demo

compare

this function

linear

Expo

easeInExpo

transition: 0.6s cubic-bezier(0.7, 0, 0.84, 0);

demo

compare

this function

linear

easeOutExpo

transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);

demo

compare

this function

linear

easeInOutExpo

transition: 0.6s cubic-bezier(0.87, 0, 0.13, 1);

demo

compare

this function

linear

Back

easeInBack

transition: 0.6s cubic-bezier(0.36, 0, 0.66, -0.56);

demo

compare

this function

linear

easeOutBack

transition: 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);

demo

compare

this function

linear

easeInOutBack

transition: 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);

demo

compare

this function

linear