~توابع easing - نرخ تغییر پارامتر را در طول زمان مشخص می کنند.

اشیاء در زندگی واقعی به سرعت شروع به حرکت کردن و استادن نمی کنند، و همچنین هیچوقت با یک سرعت ثابت حرکت نمی کنند . وقتی ما یک کشو را باز می کنیم در ایتدا اون رو با سرعت حرکت میدم و سرعتش کم میشه تا زمانی که بیرون بیاد. یا یک شیء رو روی زمین بندازید ، اول با سرعت شتاب رو به پائین می گیره و بعد از برخورد با زمین به بالا می پره.

این صفحه به شما کمک میکنه تا easing درستی رو نتخاب کنید

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

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع easing را انتخاب کنید متاسفانه همه آن ها easing را پشتیبانی نمی کنند و شما باید تابع easing مد نظر خودتون رو به عنوان (Bezier curve) انتخاب کنید.

یک تابع easing را جهت نمایش نماد های منحنی آن انتخاب کنید.

div {
  -webkit-transition: all 600ms منحنی easing;
  transition:         all 600ms منحنی easing; }

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

div {
  @include transition(all 600ms ceaser($نام  easing)); }

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

div.animate({ top: '-=100px' }, 600, 'نام  easing', function () { … })
همه easing ها

easeInSine

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

div.animate({ top: '-=100px' }, 600, 'easeInSine', function () { … })
همه easing ها

easeOutSine

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInOutSine

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

div.animate({ top: '-=100px' }, 600, 'easeInOutSine', function () { … })
همه easing ها

easeInQuad

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeOutQuad

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInOutQuad

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuad', function () { … })
همه easing ها

easeInCubic

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeOutCubic

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInOutCubic

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInQuart

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeOutQuart

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInOutQuart

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInQuint

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeOutQuint

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInOutQuint

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInExpo

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeOutExpo

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInOutExpo

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع easing را انتخاب کنید

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

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInCirc

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

div.animate({ top: '-=100px' }, 600, 'easeInCirc', function () { … })
همه easing ها

easeOutCirc

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

div.animate({ top: '-=100px' }, 600, 'easeOutCirc', function () { … })
همه easing ها

easeInOutCirc

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

div.animate({ top: '-=100px' }, 600, 'easeInOutCirc', function () { … })
همه easing ها

easeInBack

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

div.animate({ top: '-=100px' }, 600, 'easeInBack', function () { … })
همه easing ها

easeOutBack

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

div.animate({ top: '-=100px' }, 600, 'easeOutBack', function () { … })
همه easing ها

easeInOutBack

xt

CSS

خصوصیت های transition و animation به شما اجازه می دهد تا یک تابع 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); }

ویرایش در cubic-bezier.com.

SCSS

Sass/SCSS هم انیمیشن تعریف می کنند. Compass پیشوند های قبل از ویژگی ها transition و animation رو حذف میکنه و پلاگین Compass Ceaser به شما امکان پاس دادن نام تابع easign رو میده. (بدون تعیین دقیق منحنی ها)

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

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

div.animate({ top: '-=100px' }, 600, 'easeInOutBack', function () { … })
همه easing ها

easeInElastic

xt

CSS

در CSS پشتیبانی نمیشه. اما می تونید در JS از اون استفاده کنید یا با استفاده از انیمیشن CSS@keyframes بنویسید.

SCSS

در CSS پشتیبانی نمیشه. اما می تونید در JS از اون استفاده کنید یا با استفاده از انیمیشن CSS@keyframes بنویسید.

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeOutElastic

xt

CSS

در CSS پشتیبانی نمیشه. اما می تونید در JS از اون استفاده کنید یا با استفاده از انیمیشن CSS@keyframes بنویسید.

SCSS

در CSS پشتیبانی نمیشه. اما می تونید در JS از اون استفاده کنید یا با استفاده از انیمیشن CSS@keyframes بنویسید.

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInOutElastic

xt

CSS

در CSS پشتیبانی نمیشه. اما می تونید در JS از اون استفاده کنید یا با استفاده از انیمیشن CSS@keyframes بنویسید.

SCSS

در CSS پشتیبانی نمیشه. اما می تونید در JS از اون استفاده کنید یا با استفاده از انیمیشن CSS@keyframes بنویسید.

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInBounce

xt

CSS

در CSS پشتیبانی نمیشه. اما می تونید در JS از اون استفاده کنید یا با استفاده از انیمیشن CSS@keyframes بنویسید.

SCSS

در CSS پشتیبانی نمیشه. اما می تونید در JS از اون استفاده کنید یا با استفاده از انیمیشن CSS@keyframes بنویسید.

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeOutBounce

xt

CSS

در CSS پشتیبانی نمیشه. اما می تونید در JS از اون استفاده کنید یا با استفاده از انیمیشن CSS@keyframes بنویسید.

SCSS

در CSS پشتیبانی نمیشه. اما می تونید در JS از اون استفاده کنید یا با استفاده از انیمیشن CSS@keyframes بنویسید.

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

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

easeInOutBounce

xt

CSS

در CSS پشتیبانی نمیشه. اما می تونید در JS از اون استفاده کنید یا با استفاده از انیمیشن CSS@keyframes بنویسید.

SCSS

در CSS پشتیبانی نمیشه. اما می تونید در JS از اون استفاده کنید یا با استفاده از انیمیشن CSS@keyframes بنویسید.

JavaScript

jQuery به همراه jQuery Easing Plugin ساده ترین روش برای تعریف انیمیشن توسط easing هستند. نام easing را(مثل easeInCirc) به عنوان سومین پارامتر تابع .animate() قرار دهید یا به عنوان مقدار گزینه easing استفاده کنید.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
متن باز
کمک در ترجمه سایت به زبان شما