Objects in real life don’t just start and stop instantly, and almost never move at a constant speed. When we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.

This page helps you choose the right easing function.

linear

xt

css+js

easeInSine

easeOutSine

easeInOutSine

easeInQuad

easeOutQuad

easeInOutQuad

easeInCubic

easeOutCubic

easeInOutCubic

easeInQuart

easeOutQuart

easeInOutQuart

easeInQuint

easeOutQuint

easeInOutQuint

easeInExpo

easeOutExpo

easeInOutExpo

easeInCirc

easeOutCirc

easeInOutCirc

easeInBack

easeOutBack

easeInOutBack

js

easeInElastic

easeOutElastic

easeInOutElastic

easeInBounce

easeOutBounce

easeInOutBounce

CSS

CSS properties transition and animation allow you to pick the easing function. Unfortunately, they don’t support all easings and you must specify the desired easing function yourself (as a Bezier curve).

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easing name)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInSine)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeOutSine)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInOutSine)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInQuad)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeOutQuad)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInOutQuad)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInCubic)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeOutCubic)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInOutCubic)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInQuart)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeOutQuart)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInOutQuart)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInQuint)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeOutQuint)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInOutQuint)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInExpo)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeOutExpo)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInOutExpo)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInCirc)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeOutCirc)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInOutCirc)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInBack)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeOutBack)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

SCSS

Sass/SCSS can describe animations too! Compass removes prefixes before the transition and animation properties, and the Compass Ceaser plugin lets you pass the easing function by name (without specifying the exact Bezier curves).

div {
@include transition(all 600ms ceaser($easeInOutBack)); }

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

easeInElastic

CSS

Not supported in CSS. But you can use in JS or write it out with the CSS Animation @keyframes.

SCSS

Not supported in CSS. But you can use in JS or write it out with the CSS Animation @keyframes.

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

easeOutElastic

CSS

Not supported in CSS. But you can use in JS or write it out with the CSS Animation @keyframes.

SCSS

Not supported in CSS. But you can use in JS or write it out with the CSS Animation @keyframes.

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

easeInOutElastic

CSS

Not supported in CSS. But you can use in JS or write it out with the CSS Animation @keyframes.

SCSS

Not supported in CSS. But you can use in JS or write it out with the CSS Animation @keyframes.

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

easeInBounce

CSS

Not supported in CSS. But you can use in JS or write it out with the CSS Animation @keyframes.

SCSS

Not supported in CSS. But you can use in JS or write it out with the CSS Animation @keyframes.

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

easeOutBounce

CSS

Not supported in CSS. But you can use in JS or write it out with the CSS Animation @keyframes.

SCSS

Not supported in CSS. But you can use in JS or write it out with the CSS Animation @keyframes.

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.

easeInOutBounce

CSS

Not supported in CSS. But you can use in JS or write it out with the CSS Animation @keyframes.

SCSS

Not supported in CSS. But you can use in JS or write it out with the CSS Animation @keyframes.

JavaScript

jQuery with the jQuery Easing Plugin is the easiest way to describe animation with easing. Pass the easing name (like easeInCirc) to the .animate() function as the third argument, or use it as the value of the easing option.