Các hàm easing xác định độ thay đổi của các thuộc tính theo thời gian.

Các đố tượng trong thế giới thật không bao giờ di chuyển hoặc dừng lại một cách đột ngột, và cũng không di chuyển với tốc độ cố định. Khi bạn mở ngăn kéo, đầu tiên ta kéo nó nhanh, sau đó chậm dần cho đến khi mở hoàn toàn. Khi thả một cái gì đó xuống sàn nhà, nó sẽ bật ngược lại với độ cao thấp hơn, và cứ bật như vậy, mỗi lần chiều cao lại giảm cho đến khi đứng im.

Bài viết này sẽ giúp bạn chọn đúng hàm easing để diễn tả đối tượng của bạn.

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

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector Không may là css không hỗ trợ sẵn tất cả các hàm easing mà bạn thấy ở đây, Bạn phải tự mình mô tả bằng cách sử dụng Bezier.

Click vào một hình easing để xem cách xây dựng Bezier của nó.

div {
  -webkit-transition: all 600ms easing’s Bezier curve;
  transition:         all 600ms easing’s Bezier curve; }

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

div {
  @include transition(all 600ms ceaser($hàm easing)); }

JavaScript

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

div.animate({ top: '-=100px' }, 600, 'hàm easing', function () { … })
Quay lại

easeInSine

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

div.animate({ top: '-=100px' }, 600, 'easeInSine', function () { … })
Quay lại

easeOutSine

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInOutSine

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutSine', function () { … })
Quay lại

easeInQuad

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeOutQuad

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInOutQuad

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuad', function () { … })
Quay lại

easeInCubic

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeOutCubic

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInOutCubic

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInQuart

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeOutQuart

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInOutQuart

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInQuint

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeOutQuint

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInOutQuint

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInExpo

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeOutExpo

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInOutExpo

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInCirc

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

div.animate({ top: '-=100px' }, 600, 'easeInCirc', function () { … })
Quay lại

easeOutCirc

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

div.animate({ top: '-=100px' }, 600, 'easeOutCirc', function () { … })
Quay lại

easeInOutCirc

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutCirc', function () { … })
Quay lại

easeInBack

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

div.animate({ top: '-=100px' }, 600, 'easeInBack', function () { … })
Quay lại

easeOutBack

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

div.animate({ top: '-=100px' }, 600, 'easeOutBack', function () { … })
Quay lại

easeInOutBack

xt

CSS

Thuộc tính transitionanimation cho phép bạn chọn một hàm easing cho selector

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

Sửa trên cubic-bezier.com.

SCSS

Sass/CSS cũng có thể xác định hiệu ứng như trong jQuery. với Compass, bạn cần include thuộc tính transition hoặc animation ( không có tiền tố ), Sau đó plugin Compass Ceaser sẽ giúp bạn xây dựng code css cho hiệu ứng. Bạn chỉ cần truyền vào tên của easing mà bạn muốn.

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

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutBack', function () { … })
Quay lại

easeInElastic

xt

CSS

Không được hỗ trợ sẵn trong CSS. Nhưng bạn có thể sử dụng Javascript hoặc tự viết @keyframes trong CSS Animation.

SCSS

Không được hỗ trợ sẵn trong CSS. Nhưng bạn có thể sử dụng Javascript hoặc tự viết @keyframes trong CSS Animation.

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeOutElastic

xt

CSS

Không được hỗ trợ sẵn trong CSS. Nhưng bạn có thể sử dụng Javascript hoặc tự viết @keyframes trong CSS Animation.

SCSS

Không được hỗ trợ sẵn trong CSS. Nhưng bạn có thể sử dụng Javascript hoặc tự viết @keyframes trong CSS Animation.

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInOutElastic

xt

CSS

Không được hỗ trợ sẵn trong CSS. Nhưng bạn có thể sử dụng Javascript hoặc tự viết @keyframes trong CSS Animation.

SCSS

Không được hỗ trợ sẵn trong CSS. Nhưng bạn có thể sử dụng Javascript hoặc tự viết @keyframes trong CSS Animation.

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInBounce

xt

CSS

Không được hỗ trợ sẵn trong CSS. Nhưng bạn có thể sử dụng Javascript hoặc tự viết @keyframes trong CSS Animation.

SCSS

Không được hỗ trợ sẵn trong CSS. Nhưng bạn có thể sử dụng Javascript hoặc tự viết @keyframes trong CSS Animation.

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeOutBounce

xt

CSS

Không được hỗ trợ sẵn trong CSS. Nhưng bạn có thể sử dụng Javascript hoặc tự viết @keyframes trong CSS Animation.

SCSS

Không được hỗ trợ sẵn trong CSS. Nhưng bạn có thể sử dụng Javascript hoặc tự viết @keyframes trong CSS Animation.

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

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

easeInOutBounce

xt

CSS

Không được hỗ trợ sẵn trong CSS. Nhưng bạn có thể sử dụng Javascript hoặc tự viết @keyframes trong CSS Animation.

SCSS

Không được hỗ trợ sẵn trong CSS. Nhưng bạn có thể sử dụng Javascript hoặc tự viết @keyframes trong CSS Animation.

jQuery

Trong jQuery có plugin jQuery Easing, đây là cách dễ nhất để làm việc với easing. Bạn chỉ cần cung cấp tên easing vào tham số thứ ba của phương thức .animate(). Hoặc có thể truyền vào dạng option, khi đó easing map với tên easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
open source
Help translate site to your language