Dämpningsfuktionerna (engelska "easing functions") kontrollerar hur ett värde ändras över en viss tid.

I den verkliga världen rör sig saker och ting nästan aldrig med en jämn hastighet. De startar och stannar heller inte helt plötsligt — om du t.ex öppnar en byrålåda, drar du först snabbt och sedan långsammare när lådan har kommit ut en bit. Släpper du en boll på golvet, kommer den först öka hastigheten på väg neråt och sedan studsa tillbaks uppåt när den träffat golvet.

Den här sidan är till för att hjälpa dig att välja rätt dämpningsfunktion.

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

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion. Tyvärr stödjer de inte alla sorters dämpningar, och då måste du ange den dämpningsfunktion du vill använda manuellt (i form av en Bezierkurva)

Välj en dämpningsfunktion för att visa en notation av Bezierkurvan.

div {
  -webkit-transition: all 600ms dämpningens Bezierkurva;
  transition:         all 600ms dämpningens Bezierkurva; }

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

div {
  @include transition(all 600ms ceaser($dämpningens namn)); }

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

div.animate({ top: '-=100px' }, 600, 'dämpningens namn', function () { … })
Alla dämpningsfunktioner

easeInSine

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeOutSine

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInOutSine

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInQuad

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeOutQuad

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInOutQuad

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInCubic

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeOutCubic

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInOutCubic

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInQuart

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeOutQuart

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInOutQuart

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInQuint

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeOutQuint

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInOutQuint

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInExpo

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeOutExpo

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInOutExpo

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInCirc

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeOutCirc

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInOutCirc

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInBack

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeOutBack

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInOutBack

xt

CSS

Med CSS kan du använda "transition" och "animation" för att välja en dämpningsfunktion.

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

Redigera på cubic-bezier.com.

SCSS

Sass/SCSS kan också beskiva animationer. Compass använder inte prefixen före "transition" och "animation", och tillägget Compass Ceaser låter dig referera till dämpningsfunktionerna med deras namn (utan att behöva ange Bezierkurvan)

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

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInElastic

xt

CSS

Stöds inte i CSS. Du kan dock använda JavaScript, eller CSS med regeln "@keyframes".

SCSS

Stöds inte i CSS. Du kan dock använda JavaScript, eller CSS med regeln "@keyframes".

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeOutElastic

xt

CSS

Stöds inte i CSS. Du kan dock använda JavaScript, eller CSS med regeln "@keyframes".

SCSS

Stöds inte i CSS. Du kan dock använda JavaScript, eller CSS med regeln "@keyframes".

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInOutElastic

xt

CSS

Stöds inte i CSS. Du kan dock använda JavaScript, eller CSS med regeln "@keyframes".

SCSS

Stöds inte i CSS. Du kan dock använda JavaScript, eller CSS med regeln "@keyframes".

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInBounce

xt

CSS

Stöds inte i CSS. Du kan dock använda JavaScript, eller CSS med regeln "@keyframes".

SCSS

Stöds inte i CSS. Du kan dock använda JavaScript, eller CSS med regeln "@keyframes".

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeOutBounce

xt

CSS

Stöds inte i CSS. Du kan dock använda JavaScript, eller CSS med regeln "@keyframes".

SCSS

Stöds inte i CSS. Du kan dock använda JavaScript, eller CSS med regeln "@keyframes".

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

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

easeInOutBounce

xt

CSS

Stöds inte i CSS. Du kan dock använda JavaScript, eller CSS med regeln "@keyframes".

SCSS

Stöds inte i CSS. Du kan dock använda JavaScript, eller CSS med regeln "@keyframes".

JavaScript

jQuery med jQuery Easing Plugin är det enklaste sättet att beskriva animationer med dämpning. Ange dämpningsfunktionens namn (t.ex. "easeInCirc") som ".animate()"-funktionens tredje argument, eller använd den som värde för alternativet "easing".

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
öppen källkod
Hjälp oss översätta sidan till ditt språk