Easing function précise la vitesse d’exécution d’une animation pour la rendre plus réaliste.

Un objet réel ne commence pas son mouvement instantanément et à vitesse constante. Lorsque nous ouvrons un tiroir, nous devons d’abord indiquer son accélération puis sa décélération. Lorsque quelque chose tombe, sa vitesse de chute va de plus en plus vite puis, lorsqu’il touche le sol il rebondit.

Cette page permet de choisir la fonction désirée.

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

Les propriétés CSS transition et animation permettent de définir une fonction d'easing. Malheureusement, elles ne supportent pas toutes les fonctions d'easing et vous devez définir les fonctions non supportées en utilisant les courbes de Bézier.

Selection de la function easing et affichage de sa description sous forme de courbe de Bézier.

div {
  -webkit-transition: all 600ms courbe de Bézier de l'easing;
  transition:         all 600ms courbe de Bézier de l'easing; }

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

div {
  @include transition(all 600ms ceaser($nom de l'easing)); }

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'nom de l'easing', function () { … })
Tous les easings

easeInSine

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInSine', function () { … })
Tous les easings

easeOutSine

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeOutSine', function () { … })
Tous les easings

easeInOutSine

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutSine', function () { … })
Tous les easings

easeInQuad

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInQuad', function () { … })
Tous les easings

easeOutQuad

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeOutQuad', function () { … })
Tous les easings

easeInOutQuad

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuad', function () { … })
Tous les easings

easeInCubic

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInCubic', function () { … })
Tous les easings

easeOutCubic

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeOutCubic', function () { … })
Tous les easings

easeInOutCubic

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutCubic', function () { … })
Tous les easings

easeInQuart

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInQuart', function () { … })
Tous les easings

easeOutQuart

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeOutQuart', function () { … })
Tous les easings

easeInOutQuart

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuart', function () { … })
Tous les easings

easeInQuint

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInQuint', function () { … })
Tous les easings

easeOutQuint

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeOutQuint', function () { … })
Tous les easings

easeInOutQuint

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutQuint', function () { … })
Tous les easings

easeInExpo

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInExpo', function () { … })
Tous les easings

easeOutExpo

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeOutExpo', function () { … })
Tous les easings

easeInOutExpo

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutExpo', function () { … })
Tous les easings

easeInCirc

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInCirc', function () { … })
Tous les easings

easeOutCirc

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeOutCirc', function () { … })
Tous les easings

easeInOutCirc

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutCirc', function () { … })
Tous les easings

easeInBack

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInBack', function () { … })
Tous les easings

easeOutBack

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeOutBack', function () { … })
Tous les easings

easeInOutBack

xt

CSS

Les propriétés CSS transition et animation permettent de définir une fonction d'easing.

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

Modifier sur cubic-bezier.com.

SCSS

Sass/SCSS permet de décrire une animation. Compass supprime les préfixes des propriétés transition et animation et Compass Ceaser plugin permet de positionner une fonction easing uniquement par son nom (sans utilisation de courbe de Bézier).

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

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutBack', function () { … })
Tous les easings

easeInElastic

xt

CSS

Malheureusement, cet easing n'est pas supporté en CSS. Vous pouvez cependant l'utiliser en Javascript ou avec des animations spéciales. CSS @keyframes.

SCSS

Malheureusement, cet easing n'est pas supporté en CSS. Vous pouvez cependant l'utiliser en Javascript ou avec des animations spéciales. CSS @keyframes.

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInElastic', function () { … })
Tous les easings

easeOutElastic

xt

CSS

Malheureusement, cet easing n'est pas supporté en CSS. Vous pouvez cependant l'utiliser en Javascript ou avec des animations spéciales. CSS @keyframes.

SCSS

Malheureusement, cet easing n'est pas supporté en CSS. Vous pouvez cependant l'utiliser en Javascript ou avec des animations spéciales. CSS @keyframes.

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeOutElastic', function () { … })
Tous les easings

easeInOutElastic

xt

CSS

Malheureusement, cet easing n'est pas supporté en CSS. Vous pouvez cependant l'utiliser en Javascript ou avec des animations spéciales. CSS @keyframes.

SCSS

Malheureusement, cet easing n'est pas supporté en CSS. Vous pouvez cependant l'utiliser en Javascript ou avec des animations spéciales. CSS @keyframes.

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutElastic', function () { … })
Tous les easings

easeInBounce

xt

CSS

Malheureusement, cet easing n'est pas supporté en CSS. Vous pouvez cependant l'utiliser en Javascript ou avec des animations spéciales. CSS @keyframes.

SCSS

Malheureusement, cet easing n'est pas supporté en CSS. Vous pouvez cependant l'utiliser en Javascript ou avec des animations spéciales. CSS @keyframes.

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInBounce', function () { … })
Tous les easings

easeOutBounce

xt

CSS

Malheureusement, cet easing n'est pas supporté en CSS. Vous pouvez cependant l'utiliser en Javascript ou avec des animations spéciales. CSS @keyframes.

SCSS

Malheureusement, cet easing n'est pas supporté en CSS. Vous pouvez cependant l'utiliser en Javascript ou avec des animations spéciales. CSS @keyframes.

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeOutBounce', function () { … })
Tous les easings

easeInOutBounce

xt

CSS

Malheureusement, cet easing n'est pas supporté en CSS. Vous pouvez cependant l'utiliser en Javascript ou avec des animations spéciales. CSS @keyframes.

SCSS

Malheureusement, cet easing n'est pas supporté en CSS. Vous pouvez cependant l'utiliser en Javascript ou avec des animations spéciales. CSS @keyframes.

JavaScript

jQuery Easing Plugin est la solution la plus simple pour décrire une animation. Vous avez uniquement besoin de positionner le nom de la fonction easing sur la méthode .animate en 3ème argument ou le mot easing.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
open source
Aidez à traduire ce site dans votre langue