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

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })

html
  meta charset="UTF-8"
  title= title
  script

Help translate site to your language