Easing-functies bepalen de mate van verandering van een waarde, gedurende een bepaalde periode.

Objecten in het dagelijks leven bewegen niet met een constante snelheid, en hun beweging begint en stopt niet direct. Als je een lade opent, gaat dit in eerste instantie snel; echter, zodra de lade bijna geopend is, vertraagt de beweging. Laat iets op de grond vallen en het zal eerst steeds sneller vallen, maar na de grond te raken stuitert het terug.

Deze pagina helpt je bij het kiezen van de juiste easing-functie.

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

De CSS-properties transition en animation staan het gebruik van de easing-functies toe. Helaas worden niet alle easing-functies ondersteund, en moet je de gewenste easing-functie zelf speciferen, met behulp van een Bézierkromme.

Selecteer een easing-functie om de Bézierkromme-notatie te zien.

div {
  -webkit-transition: all 600ms easing-Bézierkromme;
  transition:         all 600ms easing-Bézierkromme; }

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInSine

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeOutSine

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInOutSine

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInQuad

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeOutQuad

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInOutQuad

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInCubic

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeOutCubic

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInOutCubic

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInQuart

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeOutQuart

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInOutQuart

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInQuint

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeOutQuint

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInOutQuint

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInExpo

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeOutExpo

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInOutExpo

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInCirc

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeOutCirc

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInOutCirc

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInBack

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeOutBack

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInOutBack

xt

CSS

De CSS-properties transition en animation staan het gebruik van de easing-functies toe.

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

Bewerken op cubic-bezier.com.

SCSS

Sass/SCSS ondersteunt de animaties ook! Compass verwijdert de prefixes voor de transition- en animation-properties, en met de Compass Ceaser-plugin kunnen de easing-functies ook bij naam worden gebruikt, zonder de exacte Bézierkromme te kennen.

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

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInElastic

xt

CSS

Niet ondersteund in CSS. Wel te gebruiken in JavaScript of te gebruiken met behulp van de CSS-animatie @keyframes.

SCSS

Niet ondersteund in CSS. Wel te gebruiken in JavaScript of te gebruiken met behulp van de CSS-animatie @keyframes.

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeOutElastic

xt

CSS

Niet ondersteund in CSS. Wel te gebruiken in JavaScript of te gebruiken met behulp van de CSS-animatie @keyframes.

SCSS

Niet ondersteund in CSS. Wel te gebruiken in JavaScript of te gebruiken met behulp van de CSS-animatie @keyframes.

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInOutElastic

xt

CSS

Niet ondersteund in CSS. Wel te gebruiken in JavaScript of te gebruiken met behulp van de CSS-animatie @keyframes.

SCSS

Niet ondersteund in CSS. Wel te gebruiken in JavaScript of te gebruiken met behulp van de CSS-animatie @keyframes.

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInBounce

xt

CSS

Niet ondersteund in CSS. Wel te gebruiken in JavaScript of te gebruiken met behulp van de CSS-animatie @keyframes.

SCSS

Niet ondersteund in CSS. Wel te gebruiken in JavaScript of te gebruiken met behulp van de CSS-animatie @keyframes.

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeOutBounce

xt

CSS

Niet ondersteund in CSS. Wel te gebruiken in JavaScript of te gebruiken met behulp van de CSS-animatie @keyframes.

SCSS

Niet ondersteund in CSS. Wel te gebruiken in JavaScript of te gebruiken met behulp van de CSS-animatie @keyframes.

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

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

easeInOutBounce

xt

CSS

Niet ondersteund in CSS. Wel te gebruiken in JavaScript of te gebruiken met behulp van de CSS-animatie @keyframes.

SCSS

Niet ondersteund in CSS. Wel te gebruiken in JavaScript of te gebruiken met behulp van de CSS-animatie @keyframes.

JavaScript

jQuery met de jQuery Easing Plugin is de makkelijkste manier om animaties met easing te maken. Geef de easing-naam (bijvoorbeeld easeInCirc) door aan de .animate()-functie als derde argument, of gebruik het als de waarde van de easing-optie.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
open source
Help met het vertalen van deze website in jouw taal!