CSS- und JavaScript-Animationen im Vergleich

Sie können mit CSS oder JavaScript animieren. Was sollten Sie verwenden und warum?

Paul Lewis

Sam Thorogood

Es gibt zwei Möglichkeiten, Animationen im Web zu erstellen: mit CSS und mit JavaScript. Welche davon Sie wählen sollten, hängt wirklich von den anderen Abhängigkeiten Ihres Projekts ab und davon, welche Arten von Effekten Sie erzielen möchten.

Zusammenfassung

• CSS-Animationen für einen einfacheren Überblick z. B. das Umschalten von UI-Elementzuständen.
• Verwenden Sie JavaScript-Animationen, wenn Sie erweiterte Effekte wie Hüpfen, Stoppen, Pausieren, Zurückspulen oder Verlangsamen nutzen möchten.
• Wenn Sie mit JavaScript animieren möchten, verwenden Sie die Web Animations API oder ein für Sie geeignetes modernes Framework.

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

• Verwenden Sie CSS, wenn Sie kleinere, in sich geschlossene Zustände 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 verwenden Sie JavaScript, um die Status zu steuern, die Animationen selbst sind jedoch in Ihrem CSS-Code enthalten.
• Verwenden Sie JavaScript, wenn Sie umfangreiche Kontrolle über Ihre Animationen benötigen. Das Web Animations API ist der auf Standards basierende Ansatz, der heute in den meisten modernen Browsern verfügbar ist. Dadurch erhalten Sie echte Objekte, die sich ideal für komplexe objektorientierte Anwendungen eignen. JavaScript ist auch nützlich, wenn Sie Ihre Animationen anhalten, anhalten, 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 erstellen oder in einem HTML-Canvas zeichnen.

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

Mit CSS animieren

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

Unten finden Sie einige CSS-Elemente, mit denen ein Element 100px sowohl auf der X- als auch auf der Y-Achse verschoben wird. Dazu wird ein CSS-Übergang verwendet, der 500ms dauert. Wenn die Klasse move hinzugefügt wird, ändert sich der Wert transform 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 Optionen für das Easing, mit dem sich die Animation im Wesentlichen anfühlt. Weitere Informationen zum Easing finden Sie im Leitfaden Easing-Grundlagen.

Wenn Sie wie im obigen Snippet separate CSS-Klassen zur Verwaltung Ihrer Animationen erstellen, können Sie die einzelnen Animationen dann mit JavaScript ein- und ausschalten:

box.classList.add('move');

So schaffen Sie eine gute Balance zwischen Ihren Apps. Sie können sich auf die Statusverwaltung mit JavaScript konzentrieren und einfach die entsprechenden Klassen für die Zielelemente festlegen. Die Animationen werden dann vom Browser verarbeitet. In diesem Fall können Sie auf transitionend-Ereignisse für das Element warten, aber nur dann, wenn es Ihnen möglich ist, auf die Unterstützung älterer Versionen von Internet Explorer zu verzichten. Version 10 war die erste Version, die diese Ereignisse unterstützte. Alle anderen Browser unterstützen das Ereignis schon seit einiger Zeit.

Das JavaScript, das zum Warten auf das Ende eines Übergangs benötigt wird, sieht wie folgt 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 einzelne Animations-Keyframes, -Dauer und -Iterationen.

Hinweis : Wenn Sie Animationen zum ersten Mal verwenden, sind Keyframes ein alter Begriff aus handgezeichneten Animationen. Animatoren erstellten bestimmte Frames für eine Aktion, sogenannte Keyframes, die Dinge wie den extremsten Teil einer Bewegung erfassen und dann alle einzelnen Frames zwischen den Keyframes zeichnen. Bei CSS-Animationen gibt es einen ähnlichen Prozess, bei dem wir dem Browser mitteilen, welche Werte CSS-Eigenschaften an bestimmten Punkten haben müssen, um die Lücken zu füllen.

Sie können das Feld beispielsweise auf die gleiche Weise mit Übergängen animieren, jedoch ohne Nutzerinteraktionen wie Klicken und mit unendlichen Wiederholungen. 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 beim Erstellen der Versionen des CSS-Codes mit Präfix helfen, sodass Sie die Version ohne Präfix in Ihre Quelldateien schreiben können.

Animieren mit JavaScript und Web Animations API

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 Leistung. Sie können die Web Animations API verwenden, um entweder bestimmte CSS-Eigenschaften zu animieren oder zusammensetzbare Effektobjekte zu erstellen.

JavaScript-Animationen sind unverzichtbar, da Sie sie inline als Teil Ihres Codes schreiben. Sie können sie auch in anderen Objekten kapseln. Unten sehen Sie den JavaScript-Code, den Sie schreiben müssten, um den zuvor beschriebenen CSS-Übergang neu zu erstellen:

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 ändern Webanimationen nur die Darstellung eines Elements. Wenn Ihr Objekt an der Position verbleiben soll, an die es verschoben wurde, sollten Sie die zugrunde liegenden Stile nach Abschluss der Animation ändern, wie in unserem Beispiel beschrieben.

Ausprobieren

Das Web Animations API ist ein relativ neuer Standard des W3C. Es wird von den meisten modernen Browsern nativ unterstützt. Für moderne Browser, die keine Unterstützung bieten, ist ein Polyfill verfügbar.

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