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 oorgangeeaseInSine
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 oorgangeeaseOutSine
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 oorgangeeaseInOutSine
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 oorgangeeaseInQuad
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 oorgangeeaseOutQuad
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 oorgangeeaseInOutQuad
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 oorgangeeaseInCubic
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 oorgangeeaseOutCubic
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 oorgangeeaseInOutCubic
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 oorgangeeaseInQuart
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 oorgangeeaseOutQuart
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 oorgangeeaseInOutQuart
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 oorgangeeaseInQuint
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 oorgangeeaseOutQuint
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 oorgangeeaseInOutQuint
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 oorgangeeaseInExpo
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 oorgangeeaseOutExpo
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 oorgangeeaseInOutExpo
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 oorgangeeaseInCirc
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 oorgangeeaseOutCirc
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 oorgangeeaseInOutCirc
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 oorgangeeaseInBack
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 oorgangeeaseOutBack
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 oorgangeeaseInOutBack
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 oorgangeeaseInElastic
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 oorgangeeaseOutElastic
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 oorgangeeaseInOutElastic
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 oorgangeeaseInBounce
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 oorgangeeaseOutBounce
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 oorgangeeaseInOutBounce
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 () { … })