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

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 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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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

xt

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
open source
Help vertaal blad in jou taal