Easing Functions Cheat Sheet

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

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

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

easeInElastic

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.

easeOutElastic

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.

easeInOutElastic

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.

easeInBounce

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.

easeOutBounce

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.

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, '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

Help translate site to your language