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 zum Erstellen von Animationen im Web: mit CSS und mit JavaScript. Welche Sie auswählen, hängt wirklich von den anderen Abhängigkeiten Ihres Projekts und den Effekten ab, die 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 benötigen.
• Wenn Sie Animationen mit JavaScript erstellen möchten, verwenden Sie die Web Animations API oder ein modernes Framework, mit dem Sie vertraut sind.

Die meisten einfachen Animationen lassen sich entweder mit CSS oder JavaScript erstellen. Der Aufwand und die Zeit, die dafür benötigt werden, sind jedoch unterschiedlich (siehe auch CSS- im Vergleich zu JavaScript-Leistung). Jede Methode hat ihre 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 ideal, um ein Navigationsmenü von der Seite einblenden oder eine Kurzinfo anzeigen zu lassen. Sie verwenden möglicherweise JavaScript, um die Status zu steuern, die Animationen selbst befinden sich jedoch in Ihrem CSS.
• Verwenden Sie JavaScript, wenn Sie die Animationen umfassend steuern möchten. Die Web Animations API ist der standardbasierte Ansatz, der heute 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 stoppen, pausieren, verlangsamen oder umkehren möchten.
• Verwende requestAnimationFrame direkt, wenn du eine ganze Szene manuell orchestrieren möchtest. Dies ist ein erweiterter JavaScript-Ansatz, der jedoch nützlich sein kann, wenn Sie ein Spiel entwickeln oder auf eine 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 möglicherweise einfacher, dieses Framework für Ihre Animationen zu verwenden.

Animationen mit CSS erstellen

Mit CSS lassen sich ganz einfach Animationen auf dem Bildschirm erstellen. Dieser Ansatz wird als deklarativ bezeichnet, 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. Dies erfolgt mithilfe eines CSS-Übergangs, der auf 500ms festgelegt ist. 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 auch Optionen für das Easing, das im Grunde bestimmt, wie sich die Animation anfühlt. Weitere Informationen zu Easing finden Sie im Leitfaden The Basics of Easing.

Wenn Sie wie im obigen Snippet separate CSS-Klassen zum Verwalten Ihrer Animationen erstellen, können Sie JavaScript verwenden, um jede Animation zu aktivieren und zu deaktivieren:

box.classList.add('move');

So erhalten Sie ein gutes Gleichgewicht für Ihre Apps. Sie können sich auf die Verwaltung des Status mit JavaScript konzentrieren und einfach die entsprechenden Klassen für die Zielelemente festlegen. Der Browser kümmert sich dann um die Animationen. Wenn Sie diesen Ansatz wählen, können Sie transitionend-Ereignisse für das Element abhören. Das ist jedoch nur möglich, 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 Erfassen des Endes einer Übergangsanimation 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. Damit haben Sie viel mehr Kontrolle über einzelne Animations-Keyframes, ‑Dauern und ‑Wiederholungen.

Sie können das Feld beispielsweise auf dieselbe Weise mit Übergängen animieren, aber ohne Nutzerinteraktionen wie Klicken und mit unendlichen Wiederholungen. Sie können auch mehrere Attribute 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 wählen die gewünschte Animation mit der Eigenschaft animation-name aus.

Wenn Ihre CSS-Animationen in älteren Browsern funktionieren sollen, müssen Sie Anbieterpräfixe hinzufügen. Viele Tools können Ihnen helfen, die Versionen des CSS mit Präfix zu erstellen, die Sie benötigen. So können Sie 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 Schreiben 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 andere Objekte einbetten. Unten sehen Sie das JavaScript, das Sie schreiben müssten, um die oben beschriebene CSS-Übergangsanimation 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 nur die Darstellung eines Elements geändert. Wenn das Objekt an der Stelle bleiben soll, an die es verschoben wurde, müssen Sie die zugrunde liegenden Stile nach Abschluss der Animation entsprechend unserem Beispiel ändern.

Ausprobieren

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

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