Easing functions specify the rate of change of a parameter over time.

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

x t

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).

Select an easing function to show its Bezier curve notation.

div {
  -webkit-transition: all 600ms easing’s Bezier curve;
  transition:         all 600ms easing’s 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.

div.animate({ top: '-=100px' }, 600, 'easing name', function () { … })
←All easings

easeInSine

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
  transition:         all 600ms cubic-bezier(0.47, 0, 0.745, 0.715); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInSine', function () { … })
←All easings

easeOutSine

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
  transition:         all 600ms cubic-bezier(0.39, 0.575, 0.565, 1); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeOutSine', function () { … })
←All easings

easeInOutSine

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
  transition:         all 600ms cubic-bezier(0.445, 0.05, 0.55, 0.95); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInOutSine', function () { … })
←All easings

easeInQuad

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
  transition:         all 600ms cubic-bezier(0.55, 0.085, 0.68, 0.53); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInQuad', function () { … })
←All easings

easeOutQuad

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition:         all 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeOutQuad', function () { … })
←All easings

easeInOutQuad

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  transition:         all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuad', function () { … })
←All easings

easeInCubic

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  transition:         all 600ms cubic-bezier(0.55, 0.055, 0.675, 0.19); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInCubic', function () { … })
←All easings

easeOutCubic

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition:         all 600ms cubic-bezier(0.215, 0.61, 0.355, 1); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeOutCubic', function () { … })
←All easings

easeInOutCubic

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInOutCubic', function () { … })
←All easings

easeInQuart

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition:         all 600ms cubic-bezier(0.895, 0.03, 0.685, 0.22); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInQuart', function () { … })
←All easings

easeOutQuart

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition:         all 600ms cubic-bezier(0.165, 0.84, 0.44, 1); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeOutQuart', function () { … })
←All easings

easeInOutQuart

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
  transition:         all 600ms cubic-bezier(0.77, 0, 0.175, 1); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuart', function () { … })
←All easings

easeInQuint

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.755, 0.05, 0.855, 0.06);
  transition:         all 600ms cubic-bezier(0.755, 0.05, 0.855, 0.06); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInQuint', function () { … })
←All easings

easeOutQuint

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
  transition:         all 600ms cubic-bezier(0.23, 1, 0.32, 1); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeOutQuint', function () { … })
←All easings

easeInOutQuint

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.86, 0, 0.07, 1);
  transition:         all 600ms cubic-bezier(0.86, 0, 0.07, 1); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuint', function () { … })
←All easings

easeInExpo

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.95, 0.05, 0.795, 0.035);
  transition:         all 600ms cubic-bezier(0.95, 0.05, 0.795, 0.035); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInExpo', function () { … })
←All easings

easeOutExpo

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.19, 1, 0.22, 1);
  transition:         all 600ms cubic-bezier(0.19, 1, 0.22, 1); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeOutExpo', function () { … })
←All easings

easeInOutExpo

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(1, 0, 0, 1);
  transition:         all 600ms cubic-bezier(1, 0, 0, 1); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInOutExpo', function () { … })
←All easings

easeInCirc

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.6, 0.04, 0.98, 0.335);
  transition:         all 600ms cubic-bezier(0.6, 0.04, 0.98, 0.335); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInCirc', function () { … })
←All easings

easeOutCirc

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.075, 0.82, 0.165, 1);
  transition:         all 600ms cubic-bezier(0.075, 0.82, 0.165, 1); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeOutCirc', function () { … })
←All easings

easeInOutCirc

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition:         all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInOutCirc', function () { … })
←All easings

easeInBack

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  transition:         all 600ms cubic-bezier(0.6, -0.28, 0.735, 0.045); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInBack', function () { … })
←All easings

easeOutBack

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition:         all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeOutBack', function () { … })
←All easings

easeInOutBack

x t

CSS

CSS properties transition and animation allow you to pick the easing function.

div {
  -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition:         all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); }

Edit on cubic-bezier.com.

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.

div.animate({ top: '-=100px' }, 600, 'easeInOutBack', function () { … })
←All easings

easeInElastic

x t

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.

div.animate({ top: '-=100px' }, 600, 'easeInElastic', function () { … })
←All easings

easeOutElastic

x t

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.

div.animate({ top: '-=100px' }, 600, 'easeOutElastic', function () { … })
←All easings

easeInOutElastic

x t

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.

div.animate({ top: '-=100px' }, 600, 'easeInOutElastic', function () { … })
←All easings

easeInBounce

x t

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.

div.animate({ top: '-=100px' }, 600, 'easeInBounce', function () { … })
←All easings

easeOutBounce

x t

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.

div.animate({ top: '-=100px' }, 600, 'easeOutBounce', function () { … })
←All easings

easeInOutBounce

x t

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.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
open source
Help translate site to your language