Easing Functions Cheat Sheet

Oorgangsfunksies (Easing functions) Bepaal die spoed van verandering van 'n sekere waarde oor 'n bepaalde periode.

Voorwerpe in realiteit begin en stop nie onmiddellik nie, en beweeg amper nooit teen 'n konstante spoed nie. Wanneer ons 'n laai oopmaak beweeg ons eers vinnig en dan stadiger soos dit uit kom. Laat val iets op die vloer en dit sal eers versnel na onderen dan terug hop nadat dit die vloer getref het.

Hierdie bladsy help jou om die regte oorgangsfunksie te kies.

linear

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 eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies. Ongelukkig ondersteun hulle nie alle oorgangsfunksies nie en jy moet die gewenste oorgangsfunksie self spesifiseer (as 'n Bézierkurwe).

Kies 'n oorgangsfunksie om die Bézierkurwe notasie te wys.

div {
  -webkit-transition: all 600ms oorgang-Bézierkurwe;
  transition:         all 600ms oorgang-Bézierkurwe; }

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

div {
  @include transition(all 600ms ceaser($oorgang-naam)); }

JavaScript

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

div.animate({ top: '-=100px' }, 600, 'oorgang-naam', function () { … })

←Alle oorgange

easeInSine

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeOutSine

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInOutSine

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInQuad

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeOutQuad

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInOutQuad

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInCubic

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeOutCubic

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInOutCubic

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInQuart

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeOutQuart

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInOutQuart

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInQuint

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeOutQuint

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInOutQuint

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInExpo

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeOutExpo

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInOutExpo

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInCirc

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeOutCirc

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInOutCirc

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInBack

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeOutBack

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInOutBack

CSS

CSS eienskappe 'transition' en 'animation' laat jou toe om die oorgangsfunksie te kies.

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

Edit op cubic-bezier.com.

SCSS

Sass/SCSS kan ook die animasie beskryf! Compass verwyder die voorvoegsels voor die 'transition' en 'animation' waardes, en die Compss Ceaser plugin laat jou toe om die oorgangsfunksie by die naam te verskaf (sonder om die presiese Bézierkurwe te spesifiseer).

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

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInElastic

CSS

Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'.

SCSS

Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'.

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeOutElastic

CSS

Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'.

SCSS

Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'.

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInOutElastic

CSS

Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'.

SCSS

Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'.

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInBounce

CSS

Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'.

SCSS

Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'.

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeOutBounce

CSS

Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'.

SCSS

Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'.

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

←Alle oorgange

easeInOutBounce

CSS

Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'.

SCSS

Word nie ondersteun in CSS nie, maar jy kan dit gebruik in JS of dit uitskryf met CSS Animation '@keyframes'.

jQuery

jQuery met die jQuery Easing Plugin is die maklikste manier om die animasie met oorgang te beskryf. Verskaf sie oorgangsfunksie naam (soos 'easeInCirc') aan die '.animate()' funksie as die derde argument, of gebruik dit as waarde van die oorgangsfunksie.

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

html
  meta charset="UTF-8"
  title= title
  script

Help vertaal blad in jou taal