easing function
Course- CSS Animation >
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 () { … })
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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); }
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