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

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

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 () { … })

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)); }

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 it’s Bezier curve notation.

div {
  -webkit-transition: all 600ms easing’s Bezier curve;
  transition:         all 600ms easing’s Bezier curve; }
All easings

easeInSine

xt

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 () { … })

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)); }

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.

All easings

easeOutSine

xt

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 () { … })

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)); }

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.

All easings

easeInOutSine

xt

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 () { … })

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)); }

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.

All easings

easeInQuad

xt

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 () { … })

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)); }

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.

All easings

easeOutQuad

xt

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 () { … })

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)); }

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.

All easings

easeInOutQuad

xt

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 () { … })

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)); }

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.

All easings

easeInCubic

xt

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 () { … })

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)); }

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.

All easings

easeOutCubic

xt

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 () { … })

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)); }

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.

All easings

easeInOutCubic

xt

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 () { … })

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)); }

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.

All easings

easeInQuart

xt

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 () { … })

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)); }

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.

All easings

easeOutQuart

xt

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 () { … })

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)); }

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.

All easings

easeInOutQuart

xt

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 () { … })

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)); }

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.

All easings

easeInQuint

xt

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 () { … })

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)); }

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.

All easings

easeOutQuint

xt

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 () { … })

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)); }

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.

All easings

easeInOutQuint

xt

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 () { … })

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)); }

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.

All easings

easeInExpo

xt

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 () { … })

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)); }

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.

All easings

easeOutExpo

xt

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 () { … })

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)); }

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.

All easings

easeInOutExpo

xt

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 () { … })

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)); }

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.

All easings

easeInCirc

xt

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 () { … })

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)); }

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.

All easings

easeOutCirc

xt

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 () { … })

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)); }

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.

All easings

easeInOutCirc

xt

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 () { … })

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)); }

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.

All easings

easeInBack

xt

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 () { … })

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)); }

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.

All easings

easeOutBack

xt

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 () { … })

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)); }

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.

All easings

easeInOutBack

xt

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 () { … })

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)); }

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.

All easings

easeInElastic

xt

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 () { … })

SCSS

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

CSS

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

All easings

easeOutElastic

xt

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 () { … })

SCSS

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

CSS

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

All easings

easeInOutElastic

xt

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 () { … })

SCSS

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

CSS

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

All easings

easeInBounce

xt

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 () { … })

SCSS

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

CSS

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

All easings

easeOutBounce

xt

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 () { … })

SCSS

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

CSS

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

All easings

easeInOutBounce

xt

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 () { … })

SCSS

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

CSS

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

html
  meta charset="UTF-8"
  title= title
  script
open source
Help translate site to your language