Easing-funksjonen bestemmer hurtigheten på en animasjon over tid for å gjøre den mer realisitisk.

Når vi åpner en skuff, gir vi den først akselerasjon, og så senker vi farten. Når noe faller, vil det gå fortere og fortere, og så spretter det tilbake etter at det har truffet bakken.

Denne siden vil hjelpe deg med å velge riktig easing-funksjon.

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 property-ene transition og animation setter easing-funksjon. Dessverre støttes ikke alle easing-funksjonene, så du må sette funksjonene ved hjelp av en Bezier-kurve med bestemte parametere.

Velg easing-funksjon for å se hvordan den kan beskrives som Bezier-kurve.

div {
  -webkit-transition: all 600ms easing’s Bezier kurve;
  transition:         all 600ms easing’s Bezier kurve; }

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

div {
  @include transition(all 600ms ceaser($easing-navn)); }

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

div.animate({ top: '-=100px' }, 600, 'easing-navn', function () { … })
Alle easing-funksjoner

easeInSine

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeOutSine

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInOutSine

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInQuad

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeOutQuad

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInOutQuad

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInCubic

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeOutCubic

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInOutCubic

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInQuart

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeOutQuart

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInOutQuart

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInQuint

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeOutQuint

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInOutQuint

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInExpo

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeOutExpo

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInOutExpo

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInCirc

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeOutCirc

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInOutCirc

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInBack

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeOutBack

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInOutBack

xt

CSS

CSS property-ene transition og animation setter easing-funksjon.

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

Rediger på cubic-bezier.com.

SCSS

Sass/SCSS hjelper deg med å forklare animasjon. Compass fjerner prefikser før transition og animation property'ene, og Compass Ceaser plugin tillater å sette easings etter navn (uten Bezier curves).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInElastic

xt

CSS

Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation @keyframes.

SCSS

Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation @keyframes.

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeOutElastic

xt

CSS

Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation @keyframes.

SCSS

Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation @keyframes.

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInOutElastic

xt

CSS

Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation @keyframes.

SCSS

Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation @keyframes.

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInBounce

xt

CSS

Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation @keyframes.

SCSS

Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation @keyframes.

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeOutBounce

xt

CSS

Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation @keyframes.

SCSS

Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation @keyframes.

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

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

easeInOutBounce

xt

CSS

Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation @keyframes.

SCSS

Dessverre støtter ikke CSS denne easing-funksjonen. Men du kan bruke den med JavaScript eller spesielle CSS Animation @keyframes.

JavaScript

jQuery med jQuery Easing Plugin er den letteste måten å forklare animasjon med easing. Du trenger bare å sette easing-navnet til det tredje argumentet, eller easing key.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
åpen kildekode
Hjelp til med oversetting av siden