fastread homefastrread library fastread menu

CSS Animation : easing function

Tutorial by:Aryan Kumar      Date: 2016-07-29 04:14:08

❰ Previous Next ❱

easeInSine

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:

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

see on cubic-bezier.com. 

easeOutSine

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

 see on cubic-bezier.com. 

 

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

 

easeInQuad

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

 see on cubic-bezier.com. 

 

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




easeOutQuad

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

 see on cubic-bezier.com. 

 

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




easeInCubic

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

 see on cubic-bezier.com. 

 

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





easeOutCubic

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

 see on cubic-bezier.com. 

 

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




easeInOutCubic

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

 see on cubic-bezier.com. 

 

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




easeInQuart

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

 see on cubic-bezier.com. 

 

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




easeOutQuart

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

 see on cubic-bezier.com. 

 

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




easeInOutQuart

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

 see on cubic-bezier.com. 

 

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



easeInQuint

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

 see on cubic-bezier.com. 

 

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



easeOutQuint

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

 see on cubic-bezier.com. 

 

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



easeInOutQuint

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

 see on cubic-bezier.com. 

 

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


easeInExpo

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

 see on cubic-bezier.com. 

 

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



easeOutExpo

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

 see on cubic-bezier.com. 

 

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



easeInOutExpo

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

 see on cubic-bezier.com. 

 

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




easeInCric

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

 see on cubic-bezier.com. 

 

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



easeOutCric

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

 see on cubic-bezier.com. 

 

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



easeInOutCric

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

 see on cubic-bezier.com. 

 

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



easeInBlack

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

 see on cubic-bezier.com. 

 

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




easeOutBlack

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

 see on cubic-bezier.com. 

 

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




easeInOutBlack

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

 see on cubic-bezier.com. 

 

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




easeInElastic

Not Support CSS

 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

Not Support CSS





CSS Animation

Submit Your Thought, Tutorial, Articls etc.

Submit Your Information India's Number one online promotion website