Yumşaqlıq funksiyası (easing) animasiyanı daha təbii etmək üçün onun cərəyan cürətini müəyyən edir.

Təbiətdə heç bir şey dərhal və bərabər sürətlə hərəkət etmir. Məsələn, əgər bir yeşiyin qapağını açırıqsa biz əvvəlcə onu artan təcillə açırıq, daha sonra sürəti azaldaraq hərəkəti saxlayırıq. Əgər bir şey yerə düşərsə, əvvəlcə sürəti artaraq yerə düşür, yerə dəydikdən sonra bir az yuxarı tullanır.

Bu saytdan siz müxtəlif yumşaqlıq funksiyalarını seçə bilərsiniz.

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

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir. Təəssüf ki, heç də bütün funksiyalar mövcud deyil, onları Bezye əyrisi olaraq göstərmək lazımdır.

Bezye əyrisi olaraq onu necə tərtib etməyi görmək üçün, funksiyanı seçin.

div {
  -webkit-transition: all 600ms Bezye əyrisi funksiyaları;
  transition:         all 600ms Bezye əyrisi funksiyaları; }

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

div {
  @include transition(all 600ms ceaser($funksiyanın adı)); }

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'funksiyanın adı', function () { … })
Все функции

easeInSine

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInSine', function () { … })
Все функции

easeOutSine

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeOutSine', function () { … })
Все функции

easeInOutSine

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInOutSine', function () { … })
Все функции

easeInQuad

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInQuad', function () { … })
Все функции

easeOutQuad

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeOutQuad', function () { … })
Все функции

easeInOutQuad

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuad', function () { … })
Все функции

easeInCubic

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInCubic', function () { … })
Все функции

easeOutCubic

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeOutCubic', function () { … })
Все функции

easeInOutCubic

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInOutCubic', function () { … })
Все функции

easeInQuart

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInQuart', function () { … })
Все функции

easeOutQuart

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeOutQuart', function () { … })
Все функции

easeInOutQuart

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuart', function () { … })
Все функции

easeInQuint

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInQuint', function () { … })
Все функции

easeOutQuint

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeOutQuint', function () { … })
Все функции

easeInOutQuint

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuint', function () { … })
Все функции

easeInExpo

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInExpo', function () { … })
Все функции

easeOutExpo

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeOutExpo', function () { … })
Все функции

easeInOutExpo

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInOutExpo', function () { … })
Все функции

easeInCirc

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInCirc', function () { … })
Все функции

easeOutCirc

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeOutCirc', function () { … })
Все функции

easeInOutCirc

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInOutCirc', function () { … })
Все функции

easeInBack

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInBack', function () { … })
Все функции

easeOutBack

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeOutBack', function () { … })
Все функции

easeInOutBack

xt

CSS

CSS-də transitionanimation xassələri yumşaqlıq funksiyasını göstərməyə imkan verir.

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

Redaktə et на cubic-bezier.com.

SCSS

Sass və SCSS animasiyaları tərtib etmək daha asandır - Compass transition animation xassələrinin önündəki prefixlərdən bizi azad edir. Compass Ceaser ilə isə funksiyanın adını Bezye əyrisi olmadan belə göstərmək mümkündür.

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

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInOutBack', function () { … })
Все функции

easeInElastic

xt

CSS

Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi @keyframes istifadə edin.

SCSS

Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi @keyframes istifadə edin.

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInElastic', function () { … })
Все функции

easeOutElastic

xt

CSS

Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi @keyframes istifadə edin.

SCSS

Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi @keyframes istifadə edin.

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeOutElastic', function () { … })
Все функции

easeInOutElastic

xt

CSS

Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi @keyframes istifadə edin.

SCSS

Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi @keyframes istifadə edin.

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInOutElastic', function () { … })
Все функции

easeInBounce

xt

CSS

Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi @keyframes istifadə edin.

SCSS

Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi @keyframes istifadə edin.

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInBounce', function () { … })
Все функции

easeOutBounce

xt

CSS

Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi @keyframes istifadə edin.

SCSS

Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi @keyframes istifadə edin.

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeOutBounce', function () { … })
Все функции

easeInOutBounce

xt

CSS

Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi @keyframes istifadə edin.

SCSS

Təəssüf ki, belə funksiyanı CSS vasitəsilə göstərmək mümkün deyil. Bunun üçün JavaScript və ya CSS Animation ilə xüsusi @keyframes istifadə edin.

JavaScript

jQuery Easing Plugin əlavə etməklə yumşaqlıq funksiyası üzrə animasiyanı tərtib etmək daha rahat olar. Bundan sonra .animate funksiyasında üçüncü arqument olaraq yalnız funksiyanın adını göstərmək kifayətdir.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
open source
Saytı öz dilinə tərcümə etməyə Yardım et