Fungsi Easing menentukan laju perubahan sebuah parameter dari waktu ke waktu.

Objek pada kehidupan nyata tidak bergerak dan berhenti dalam sekejap, dan hampir tidak pernah bergerak pada kecepatan konstan. Ketika kita membuka laci, pertama kita lakukan secara cepat lalu pelan setelah hampir keluar. Menjatuhkan benda ke lantai, pertama akan ke bawah kemudian memantul kembali.

Halaman ini membantu anda memilih Fungsi Easing yang tepat.

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

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing. Sayang sekali, mereka tidak mendukung semua Fungsi Easing, anda harus menentukan sendiri Fungsi Easing yang diinginkan (sebagai kurva Bezier).

Pilih fungsi Easing untuk menampilkan persamaan kurva Bezier nya.

div {
  -webkit-transition: all 600ms kurva Bezier Easing;
  transition:         all 600ms kurva Bezier Easing; }

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($nama Easing)); }

JavaScript

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInSine

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInSine)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeOutSine

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeOutSine)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInOutSine

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInOutSine)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInQuad

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInQuad)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeOutQuad

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeOutQuad)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInOutQuad

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInOutQuad)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInCubic

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInCubic)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeOutCubic

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeOutCubic)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInOutCubic

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInOutCubic)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInQuart

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInQuart)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeOutQuart

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeOutQuart)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInOutQuart

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInOutQuart)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInQuint

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInQuint)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeOutQuint

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeOutQuint)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInOutQuint

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInOutQuint)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInExpo

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInExpo)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeOutExpo

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeOutExpo)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInOutExpo

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInOutExpo)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInCirc

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInCirc)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeOutCirc

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeOutCirc)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInOutCirc

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInOutCirc)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInBack

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInBack)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeOutBack

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeOutBack)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInOutBack

xt

CSS

Properti CSS transition dan animation memungkinkan anda untuk menggunakan Fungsi Easing.

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

Sunting di cubic-bezier.com.

SCSS

Sass/SCSS juga dapat menggunakan Easing pada animasi. Compass menghilangkan prefiks sebelum transition dan animation, dan plugin Compass Ceaser memungkinkan anda menggunakan Fungsi Easing dengan nama Easingnya (tanpa kurva Beziernya).

div {
  @include transition(all 600ms ceaser($easeInOutBack)); }

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInElastic

xt

CSS

Tidak didukung oleh CSS. Namun anda dapat menggunakannya di JavaScript atau menulisnya dengan animasi CSS @keyframes.

SCSS

Tidak didukung oleh CSS. Namun anda dapat menggunakannya di JavaScript atau menulisnya dengan animasi CSS @keyframes.

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeOutElastic

xt

CSS

Tidak didukung oleh CSS. Namun anda dapat menggunakannya di JavaScript atau menulisnya dengan animasi CSS @keyframes.

SCSS

Tidak didukung oleh CSS. Namun anda dapat menggunakannya di JavaScript atau menulisnya dengan animasi CSS @keyframes.

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInOutElastic

xt

CSS

Tidak didukung oleh CSS. Namun anda dapat menggunakannya di JavaScript atau menulisnya dengan animasi CSS @keyframes.

SCSS

Tidak didukung oleh CSS. Namun anda dapat menggunakannya di JavaScript atau menulisnya dengan animasi CSS @keyframes.

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInBounce

xt

CSS

Tidak didukung oleh CSS. Namun anda dapat menggunakannya di JavaScript atau menulisnya dengan animasi CSS @keyframes.

SCSS

Tidak didukung oleh CSS. Namun anda dapat menggunakannya di JavaScript atau menulisnya dengan animasi CSS @keyframes.

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeOutBounce

xt

CSS

Tidak didukung oleh CSS. Namun anda dapat menggunakannya di JavaScript atau menulisnya dengan animasi CSS @keyframes.

SCSS

Tidak didukung oleh CSS. Namun anda dapat menggunakannya di JavaScript atau menulisnya dengan animasi CSS @keyframes.

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

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

easeInOutBounce

xt

CSS

Tidak didukung oleh CSS. Namun anda dapat menggunakannya di JavaScript atau menulisnya dengan animasi CSS @keyframes.

SCSS

Tidak didukung oleh CSS. Namun anda dapat menggunakannya di JavaScript atau menulisnya dengan animasi CSS @keyframes.

jQuery

jQuery dengan jQuery Easing Plugin adalah cara termudah untuk menggunakan Easing di animasi. Gunakan nama Easing (seperti easeInCirc) di fungsi .animate() sebagai argumen ketiga, atau menggunakannya sebagai nilai di opsi easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
open source
Bantu menterjemahkan situs ini ke dalam bahasa Anda