CSS- und JavaScript-Animationen im Vergleich

Sie können Animationen mit CSS oder JavaScript erstellen. Welche sollten Sie verwenden und warum?

Paul Lewis

Sam Thorogood

Es gibt zwei Hauptmethoden, um Animationen im Web zu erstellen: mit CSS und mit JavaScript. Welche Sie auswählen, hängt von den anderen Abhängigkeiten Ihres Projekts und den gewünschten Effekten ab.

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). Jede Methode hat Vor- und Nachteile. Hier sind einige gute Richtlinien:

• Verwenden Sie CSS, wenn Sie kleinere, in sich geschlossene Status für UI-Elemente haben. CSS-Übergänge und -Animationen eignen sich hervorragend, um ein Navigationsmenü seitlich einzublenden oder einen Kurzinfotext 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. So 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, der aber nützlich sein kann, wenn Sie ein Spiel erstellen oder auf einer HTML-Canvas-Seite 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 erhalten Sie ein gutes Gleichgewicht 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. Wenn Sie diese Option verwenden, können Sie transitionend-Ereignisse für das Element überwachen, aber nur, wenn Sie auf die Unterstützung älterer Internet Explorer-Versionen verzichten können. 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 erforderlich ist, sieht so 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 die einzelnen Animations-Keyframes, ‑Dauer und ‑Iterationen viel besser steuern können.

Hinweis : Wenn Sie neu in der Welt der Animationen sind, ist der Begriff „Keyframe“ ein alter Begriff aus der Zeit der handgezeichneten Animationen. Animatoren erstellten bestimmte Frames für eine Aktion, sogenannte Keyframes, in denen z. B. der extremste Teil einer Bewegung festgehalten wurde. Anschließend zeichneten sie alle einzelnen Frames zwischen den Keyframes. Bei CSS-Animationen ist das heute ähnlich: Wir geben dem Browser an, welche Werte CSS-Properties an bestimmten Stellen haben müssen, und er füllt die Lücken.

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. Mit vielen Tools können Sie die erforderlichen Präfixversionen des CSS erstellen und die Version ohne Präfix in Ihre Quelldateien schreiben.

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 das JavaScript, das Sie schreiben müssten, um die oben beschriebene CSS-Übergang zu reproduzieren:

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.