Easing-funktionen angiver hvordan animationen forløber for at gøre den mere realistisk.

Objekter begynder ikke at bevæge sig med det samme eller med en konstant hastighed. Når vi åbner en skuffe er første del af bevægelsen hurtig, og så bremser vi den ned. Når noget falder, ryger det ned hurtigere og hurtigere, og så hopper det op igen efter det har ramt gulvet.

Denne side hjælper dig med at finde den rette easing-funktion.

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-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion. Desværre understøtter de ikke alle easing-funktioner, og du kan blive nødt til at definere dem via Bezier-kurver.

Vælg easing-funktion for at se beskrivelsen sammen med en Bezierkurve.

div {
  -webkit-transition: all 600ms easing-funktionens Bezierkurve;
  transition:         all 600ms easing-funktionens Bezierkurve; }

SCSS

Sass/SCSS hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

JavaScript

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInSine

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeOutSine

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInOutSine

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInQuad

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeOutQuad

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInOutQuad

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInCubic

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeOutCubic

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInOutCubic

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInQuart

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeOutQuart

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInOutQuart

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInQuint

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeOutQuint

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInOutQuint

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInExpo

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeOutExpo

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInOutExpo

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInCirc

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeOutCirc

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInOutCirc

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInBack

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeOutBack

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInOutBack

xt

CSS

CSS-egenskaberne transition og animation giver dig mulighed for at vælge en easing-funktion.

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 hjælper dig med at angive animationer. Compass fjerner de nødvendige prefixes før transition og animation egenskaber, og med Compass Ceaser plugin kan du sætte easing-funktioner vha. deres navn (uden at angive specifikke Bezierkurver).

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

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInElastic

xt

CSS

Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. @keyframes.

SCSS

Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. @keyframes.

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeOutElastic

xt

CSS

Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. @keyframes.

SCSS

Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. @keyframes.

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInOutElastic

xt

CSS

Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. @keyframes.

SCSS

Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. @keyframes.

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInBounce

xt

CSS

Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. @keyframes.

SCSS

Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. @keyframes.

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeOutBounce

xt

CSS

Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. @keyframes.

SCSS

Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. @keyframes.

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

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

easeInOutBounce

xt

CSS

Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. @keyframes.

SCSS

Desværre, CSS understøtter ikke denne easing-funktion. Men du kan bruge den i JavaScript eller en speciel CSS-animation vha. @keyframes.

jQuery

jQuery med jQuery Easing Plugin er den letteste måde at angive en animation med easing. Kald metoden .animate med easing-navnet (f.eks. easeInCirc) som tredje argument eller som værdi af easing-parametret.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
open source
Hjælp med at oversætte websitet til dit sprog