CSS- und JavaScript-Animationen im Vergleich

Animationen lassen sich mit CSS oder JavaScript erstellen. Welches Tool sollten Sie verwenden und warum?

Paul Lewis

Sam Thorogood

Es gibt zwei Möglichkeiten, Animationen im Web zu erstellen: mit CSS und mit JavaScript. Für welche Methode Sie sich entscheiden, hängt wirklich von den anderen Abhängigkeiten Ihres Projekts ab und davon, welche Art von Effekten Sie erreichen möchten.

Zusammenfassung

• Nutzen Sie CSS-Animationen für einfachere „One-Shot“-Übergänge, z. B. das Wechseln zwischen UI-Elementstatus.
• Verwenden Sie JavaScript-Animationen, wenn Sie erweiterte Effekte wie das Abspringen, Anhalten, Pausieren, Zurückspulen oder Verlangsamen nutzen möchten.
• Wenn Sie sich für die Animation mit JavaScript entscheiden, verwenden Sie die Web Animations API oder ein modernes Framework, mit dem Sie vertraut sind.

Die meisten einfachen Animationen können entweder mit CSS oder JavaScript erstellt werden. Der Aufwand und die Zeit variieren jedoch (siehe auch CSS- und JavaScript-Leistung im Vergleich). Beides hat Vor- und Nachteile, aber die folgenden Richtlinien sind gute Richtlinien:

• Verwenden Sie CSS, wenn Sie kleinere, in sich geschlossene Status für UI-Elemente haben. CSS-Übergänge und -Animationen sind ideal, um ein Navigationsmenü von der Seite einzublenden oder eine Kurzinfo anzuzeigen. Möglicherweise werden Sie die Status mithilfe von JavaScript steuern, die Animationen selbst befinden sich jedoch in Ihrem CSS.
• Verwenden Sie JavaScript, wenn Sie umfassende Kontrolle über Ihre Animationen benötigen. Bei der Web Animations API handelt es sich um den auf Standards basierenden Ansatz, der heute in den meisten modernen Browsern verfügbar ist. Dadurch werden reale Objekte bereitgestellt, die sich ideal für komplexe objektorientierte Anwendungen eignen. JavaScript ist auch nützlich, wenn Sie Animationen anhalten, pausieren, verlangsamen oder umkehren müssen.
• Du kannst requestAnimationFrame direkt verwenden, wenn du eine ganze Szene von Hand orchestrieren möchtest. Dies ist ein erweiterter JavaScript-Ansatz, kann aber nützlich sein, wenn Sie ein Spiel oder eine Zeichnung in einem HTML-Canvas erstellen.

Wenn Sie bereits ein JavaScript-Framework verwenden, das Animationsfunktionen enthält, z. B. über die .animate()-Methode von jQuery oder TweenMax von GreenSock, ist es insgesamt möglicherweise einfacher, dieses für Ihre Animationen beizubehalten.

Animationen mit CSS erstellen

Die Animation mit CSS ist die einfachste Möglichkeit, etwas auf dem Bildschirm in Bewegung zu setzen. Dieser Ansatz wird als deklarativ beschrieben, da Sie angeben, was passieren soll.

Unten sehen Sie CSS-Code, mit dem ein Element 100px sowohl auf der X- als auch auf der Y-Achse verschoben wird. Dazu wird ein CSS-Übergang verwendet, der auf 500ms gesetzt ist. Wenn die Klasse move hinzugefügt wird, wird der Wert transform geändert und der Übergang beginnt.

.box {
  transform: translate(0, 0);
  transition: transform 500ms;
}

.box.move {
  transform: translate(100px, 100px);
}

Ausprobieren

Neben der Dauer des Übergangs gibt es noch weitere Optionen für das Easing. Das ist im Wesentlichen das Gefühl, wie sich die Animation anfühlt. Weitere Informationen zum Easing finden Sie im Leitfaden Easing – Grundlagen.

Wenn Sie, wie im Snippet oben, separate CSS-Klassen erstellen, um Ihre Animationen zu verwalten, können Sie die einzelnen Animationen mit JavaScript ein- und ausschalten:

box.classList.add('move');

So schaffen Sie ein Gleichgewicht bei Ihren Apps. Sie können sich auf die Verwaltung des Status mit JavaScript konzentrieren und einfach die entsprechenden Klassen für die Zielelemente festlegen, sodass der Browser die Animationen verarbeitet. Wenn Sie weitermachen, können Sie transitionend-Ereignisse für das Element überwachen, allerdings nur, wenn Sie auf die Unterstützung älterer Versionen von Internet Explorer verzichten können. Version 10 war die erste Version, die diese Ereignisse unterstützt hat. Alle anderen Browser unterstützen das Ereignis schon seit einiger Zeit.

Das JavaScript, das zum Warten auf das Ende eines Übergangs erforderlich ist, sieht folgendermaßen aus:

var box = document.querySelector('.box');
box.addEventListener('transitionend', onTransitionEnd, false);

function onTransitionEnd() {
    // Handle the transition finishing.
}

Neben CSS-Übergängen können Sie auch CSS-Animationen verwenden. Damit haben Sie viel mehr Kontrolle über die Keyframes, Dauer und Iterationen einzelner Animationen.

Hinweis : Wenn Sie mit Animationen noch nicht vertraut sind, sind Keyframes ein alter Begriff aus handgezeichneten Animationen. Animatoren erstellten bestimmte Frames für eine bestimmte Aktion, sogenannte Keyframes, die Dinge wie den extremsten Teil einer Bewegung erfassen und dann alle einzelnen Frames zwischen den Keyframes zeichnen. Ähnlich verhält es sich mit CSS-Animationen, bei denen wir den Browser anweisen, welche Werte CSS-Eigenschaften an bestimmten Stellen haben müssen, und die Lücken werden geschlossen.

Sie können das Feld zum Beispiel auf dieselbe Weise mit Übergängen animieren, aber es ohne Nutzerinteraktionen wie Klicken und mit unendlichen Wiederholungen animieren. Sie können auch mehrere Properties gleichzeitig ändern.

.box {
  animation-name: movingBox;

  animation-duration: 1300ms;

  animation-iteration-count: infinite;

  animation-direction: alternate;
}

@keyframes movingBox {
  0% {
    transform: translate(0, 0);
    opacity: 0.3;
  }

  25% {
    opacity: 0.9;
  }

  50% {
    transform: translate(100px, 100px);
    opacity: 0.2;
  }

  100% {
    transform: translate(30px, 30px);
    opacity: 0.8;
  }
}

Ausprobieren

Bei CSS-Animationen definieren Sie die Animation selbst unabhängig vom Zielelement und verwenden die Eigenschaft animation-name, um die erforderliche Animation auszuwählen.

Wenn Ihre CSS-Animationen in älteren Browsern funktionieren sollen, müssen Sie Anbieterpräfixe hinzufügen. Viele Tools können Ihnen dabei helfen, die Präfixversionen der benötigten CSS zu erstellen, sodass Sie die Version ohne Präfix in Ihre Quelldateien schreiben können.

Animationen mit JavaScript und der Web Animations API erstellen

Das Erstellen von Animationen mit JavaScript ist im Vergleich dazu komplexer als das Schreiben von CSS-Übergängen oder Animationen, bietet Entwicklern jedoch in der Regel deutlich mehr Kontrolle. Mit der Web Animations API können Sie entweder bestimmte CSS-Eigenschaften animieren oder zusammensetzbare Effektobjekte erstellen.

JavaScript-Animationen sind unerlässlich, da sie als Teil des Codes inline geschrieben werden. Sie können sie auch in andere Objekte kapseln. Unten ist der JavaScript-Code aufgeführt, den Sie schreiben müssen, um die zuvor beschriebene CSS-Umstellung nachzubilden:

var target = document.querySelector('.box');
var player = target.animate([
    {transform: 'translate(0)'},
    {transform: 'translate(100px, 100px)'}
], 500);
player.addEventListener('finish', function() {
    target.style.transform = 'translate(100px, 100px)';
});

Standardmäßig wird mit „Web Animations“ (Webanimationen) nur die Darstellung eines Elements geändert. Wenn das Objekt an der Position verbleiben soll, an die es verschoben wurde, sollten Sie die zugrunde liegenden Stile nach Abschluss der Animation wie in unserem Beispiel ändern.

Ausprobieren

Die Web Animations API ist ein relativ neuer Standard des W3C. Es wird in den meisten modernen Browsern nativ unterstützt. Für moderne Browser, die keine Unterstützung bieten, steht Polyfill zur Verfügung.

Bei JavaScript-Animationen haben Sie bei jedem Schritt die volle Kontrolle über den Stil eines Elements. Das bedeutet, dass Sie Animationen verlangsamen, pausieren, stoppen, umkehren und Elemente nach Bedarf bearbeiten können. Dies ist besonders nützlich, wenn Sie komplexe, objektorientierte Anwendungen erstellen, da Sie Ihr Verhalten richtig kapseln können.