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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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

jQuery

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 () { … })
Bütün funksiyalar

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.

jQuery

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 () { … })
Bütün funksiyalar

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.

jQuery

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 () { … })
Bütün funksiyalar

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.

jQuery

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 () { … })
Bütün funksiyalar

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.

jQuery

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 () { … })
Bütün funksiyalar

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.

jQuery

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 () { … })
Bütün funksiyalar

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.

jQuery

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