Übergangsfunktionen (engl. easing functions) beschreiben Animationsverläufe.

Wenn man zum Beispiel eine Schublade öffnet, wird diese zuerst beschleunigt. Anschließend verzögern wir die Bewegung wieder. Lässt man einen Ball fallen, so beschleunigt dieser zunächst, und hüpft nach Auftreffen auf dem Boden noch ein paar mal herum.

Diese Seite hilft dir, die richtige Übergangsfunktion auszuwählen.

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

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen. Leider werden nicht alle Übergänge in CSS unterstützt. Du kannst allerdings die Bézierkurve manuell in der Funktion festlegen.

Wähle einen Übergang, um seine Beschreibung und seine Bézierkurve zu sehen.

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

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

div {
  @include transition(all 600ms ceaser($Name der Übergangsfunktion)); }

JavaScript

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

div.animate({ top: '-=100px' }, 600, 'Name der Übergangsfunktion', function () { … })
Alle Übergange

easeInSine

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeOutSine

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInOutSine

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInQuad

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeOutQuad

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInOutQuad

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInCubic

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeOutCubic

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInOutCubic

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInQuart

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeOutQuart

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInOutQuart

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInQuint

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeOutQuint

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInOutQuint

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInExpo

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeOutExpo

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInOutExpo

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInCirc

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeOutCirc

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInOutCirc

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInBack

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeOutBack

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInOutBack

xt

CSS

Die CSS Eigenschaften transition und animation erlauben es, die Übergangsfunktion festzulegen.

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

Bearbeite auf cubic-bezier.com.

SCSS

Sass/SCSS hilft dir, deine Animation kompakt zu beschreiben. Compass entfernt die Präfixe vor den Eigenschaften transition und animation. Die Compass-Erweiterung Compass Ceaser erlaubt, eine Animation per Namen auszuwählen oder die Bézierkurve zu definieren.

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

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInElastic

xt

CSS

Leider werden nicht alle Übergänge in CSS unterstützt. Allerdings kannst du JavaScript oder spezielle CSS Animation @keyframes verwenden.

SCSS

Leider werden nicht alle Übergänge in CSS unterstützt. Allerdings kannst du JavaScript oder spezielle CSS Animation @keyframes verwenden.

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeOutElastic

xt

CSS

Leider werden nicht alle Übergänge in CSS unterstützt. Allerdings kannst du JavaScript oder spezielle CSS Animation @keyframes verwenden.

SCSS

Leider werden nicht alle Übergänge in CSS unterstützt. Allerdings kannst du JavaScript oder spezielle CSS Animation @keyframes verwenden.

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInOutElastic

xt

CSS

Leider werden nicht alle Übergänge in CSS unterstützt. Allerdings kannst du JavaScript oder spezielle CSS Animation @keyframes verwenden.

SCSS

Leider werden nicht alle Übergänge in CSS unterstützt. Allerdings kannst du JavaScript oder spezielle CSS Animation @keyframes verwenden.

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInBounce

xt

CSS

Leider werden nicht alle Übergänge in CSS unterstützt. Allerdings kannst du JavaScript oder spezielle CSS Animation @keyframes verwenden.

SCSS

Leider werden nicht alle Übergänge in CSS unterstützt. Allerdings kannst du JavaScript oder spezielle CSS Animation @keyframes verwenden.

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeOutBounce

xt

CSS

Leider werden nicht alle Übergänge in CSS unterstützt. Allerdings kannst du JavaScript oder spezielle CSS Animation @keyframes verwenden.

SCSS

Leider werden nicht alle Übergänge in CSS unterstützt. Allerdings kannst du JavaScript oder spezielle CSS Animation @keyframes verwenden.

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

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

easeInOutBounce

xt

CSS

Leider werden nicht alle Übergänge in CSS unterstützt. Allerdings kannst du JavaScript oder spezielle CSS Animation @keyframes verwenden.

SCSS

Leider werden nicht alle Übergänge in CSS unterstützt. Allerdings kannst du JavaScript oder spezielle CSS Animation @keyframes verwenden.

jQuery

jQuery mit dem jQuery Easing Plugin ist der einfachste Weg, eine Animation für Elemente zu erstellen. Der Name der Übergangsfunktion wird als 3. Argument an die .animate Funktion übergeben.

div.animate({ top: '-=100px' }, 600, 'easeInOutBounce', function () { … })
html
  meta charset="UTF-8"
  title= title
  script
open source
Hilf beim Übersetzen dieser Seite