CSS- und JavaScript-Animationen im Vergleich

Sie können mit CSS oder JavaScript animieren. Welche 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

• Verwenden Sie CSS-Animationen für einfachere „One-Shot“-Übergänge, z. B. zum Umschalten von UI-Elementstatus.
• Verwenden Sie JavaScript-Animationen, wenn Sie erweiterte Effekte wie Springen, Stoppen, Pausieren, Zurückspulen oder Verlangsamen wünschen.
• Wenn Sie mit JavaScript animieren möchten, 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 unterscheiden sich jedoch (siehe auch CSS- und JavaScript-Leistung im Vergleich). Beide haben ihre Vor- und Nachteile, aber die folgenden Richtlinien sind hilfreich:

• 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 verwenden Sie JavaScript, um die Status zu steuern, die Animationen selbst befinden sich jedoch in Ihrem CSS.
• Verwenden Sie JavaScript, wenn Sie eine umfassende Kontrolle über Ihre Animationen benötigen. Die Web Animations API ist der standardsbasierte Ansatz, der derzeit 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 Animationen anhalten, pausieren, verlangsamen oder rückwärts abspielen möchten.
• Verwende requestAnimationFrame direkt, wenn du eine ganze Szene manuell 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 Animationen verwenden, z. B. die Methode .animate() von jQuery oder TweenMax von GreenSock, ist es unter Umständen einfacher, diese für Ihre Animationen zu verwenden.

Animationen mit CSS erstellen

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

Unten sehen Sie ein CSS-Snippet, mit dem ein Element 100px sowohl entlang der X- als auch der Y-Achse verschoben wird. Dazu wird ein CSS-Übergang verwendet, der 500ms dauern soll. 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, also die Art und Weise, wie die Animation wirkt. Weitere Informationen zu Übergängen finden Sie im Leitfaden Die Grundlagen von Übergängen.

Wenn Sie wie im obigen Snippet separate CSS-Klassen zum Verwalten Ihrer Animationen erstellen, können Sie jede Animation mit JavaScript ein- und ausschalten:

box.classList.add('move');

So schaffen Sie eine gute Balance zwischen Ihren Apps. Sie können sich darauf konzentrieren, den Status mit JavaScript zu verwalten, und einfach die entsprechenden Klassen auf den Zielelementen festlegen. Die Animationen werden dann vom Browser ausgeführt. In diesem Fall können Sie auf transitionend-Ereignisse für das Element warten, aber nur dann, wenn sich auf die Unterstützung älterer Versionen von Internet Explorer verzichtet werden kann. 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, mit denen Sie viel mehr Kontrolle über einzelne Animations-Keyframes, ‑Dauer und ‑Iterationen haben.

Sie können das Feld beispielsweise auf dieselbe Weise mit Übergängen animieren, aber ohne Nutzerinteraktionen wie Klicken und mit unendlich vielen 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 unabhängig vom Zielelement und verwenden die Eigenschaft animation-name, um die gewünschte 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.

Mit JavaScript und der Web Animations API animieren

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

JavaScript-Animationen sind imperativ, da Sie sie inline als Teil Ihres Codes schreiben. Sie können sie auch in anderen Objekten einbetten. 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 das Objekt an der Stelle bleiben soll, an die es verschoben wurde, sollten Sie die zugrunde liegenden Stile nach Abschluss der Animation ändern, wie in unserem Beispiel gezeigt.

Ausprobieren

Die Web Animations API ist ein relativ neuer Standard des W3C. Es wird von den meisten modernen Browsern nativ unterstützt. Für nicht unterstützte moderne Browser ist ein Polyfill verfügbar.

Bei JavaScript-Animationen haben Sie in jedem Schritt die volle Kontrolle über die Stile eines Elements. Sie können also Animationen verlangsamen, pausieren, anhalten, rückwärts abspielen und Elemente nach Belieben bearbeiten. Das ist besonders nützlich, wenn Sie komplexe, objektorientierte Anwendungen entwickeln, da Sie das Verhalten richtig kapseln können.