Eine CSS-Animation ist eine Änderung des Stils eines Elements, die der Browser über einen bestimmten Zeitraum hinweg ausführt. Sie können diese auf zwei Arten erstellen: über die transition -Eigenschaft für Zustandsänderungen wie Hover-Effekte oder über die animation -Eigenschaft mit @keyframesfür Sequenzen, die automatisch ablaufen. Dieser Leitfaden behandelt beides. Das zugrunde liegende Argument ist jedoch einfacher: Die Eigenschaft, die Sie animieren, ist wichtiger als die Syntax, die Sie dafür verwenden. Die Syntax ist an einem Nachmittag erlernt. Ob die Animation über den Compositor-Thread läuft oder den Browser zwingt, das Layout sechzigmal pro Sekunde neu zu berechnen, entscheidet darüber, ob sich die Benutzeroberfläche auf der Hardware Ihrer Nutzer flüssig anfühlt – und genau hier kann ein Fehler teuer werden.
Bei Imaginary Cloud bewerten wir Animationsarbeiten anhand von zwei Elementen: dem Animation Timing, also Dauer und Verzögerung, die aus einer sofortigen Stiländerung eine Bewegung machen, und den Inner Components, also Pseudo-Elementen und zusätzlichen Elementen, mit denen eine Komponente mehrere Bewegungen gleichzeitig ausführen kann. Zusammen bestimmen diese Faktoren den Aufwand für die Erstellung und Wartung eines Effekts und ziehen sich durch alle folgenden Abschnitte.
Es gibt verschiedene Möglichkeiten, Bewegung auf eine Webseite zu bringen. Ein vorgefertigtes GIF als normales Bild einzubinden ist zwar einfach, doch damit verlieren Sie die Möglichkeit, die Animation per Code anzupassen. HTML-Elemente mit JavaScript zu manipulieren funktioniert zwar, belastet jedoch den Haupt-Thread des Browsers und muss sich hinter allen anderen Prozessen einreihen. Alternativ können Sie verschiedene Stile eines Elements in CSS definieren und den Browser die Übergänge zwischen diesen Zuständen im Zeitverlauf berechnen lassen – das ist einfacher zu schreiben und für den Browser leichter zu optimieren.
Das alles ist keine bloße Dekoration. Eine Ladeanimation signalisiert dem Nutzer, dass der Prozess noch läuft, während eine leere weiße Seite ihn im Ungewissen lässt, ob der Tab abgestürzt ist. Die Wartezeit ist dieselbe, aber das Erlebnis ein anderes. Genau deshalb lohnt es sich, Animationen richtig umzusetzen, anstatt ganz darauf zu verzichten.
CSS bietet zwei Arten an. Die transition -Eigenschaft steuert Hover-Effekte und andere Nutzerinteraktionen. Die animation -Eigenschaft ermöglicht kontinuierliche Bewegungen oder, wie wir sehen werden, Bewegungsabläufe mit mehreren Phasen.
Siehe den Pen types of animations von Patrícia Silva (@patsilva_tese) auf CodePen.
Egal ob einfach oder komplex, jede CSS-Animation basiert auf zwei Dingen: Animations-Timing und innere Komponenten. Eine Animation ohne Zeitangabe ist gar keine Animation, da sie sofort umschaltet. Und innere Komponenten sind Ihre Rettung, denn meistens reicht ein einzelnes Element nicht aus, um den gewünschten Effekt zu erzielen. Gehen wir sie nacheinander durch.
Für eine flüssige Animation oder einen weichen Übergang müssen Sie Zeitvorgaben definieren. Sowohl die transition als auch die animation Eigenschaft geben Ihnen die Dauer vor – also wie lange der Vorgang von Anfang bis Ende dauert –, die durch die erste Zeiteinheit in der Deklaration festgelegt wird. Danach folgt die Verzögerung, also wie lange das Element wartet, bevor es startet, was durch die zweite Zeiteinheit bestimmt wird.
/* transition: property duration timing-function delay; */
transition: all 0.5s linear 0.2s;
/* animation: name duration timing-function delay iteration-count; */
animation: rotate 1s linear 0.2s infinite;Siehe den Pen animation timing von Patrícia Silva (@patsilva_tese) auf CodePen.
Der zweite Schlüsselfaktor und der Weg zu anspruchsvollen Ergebnissen sind innere Komponenten. Wenn Sie nur ein oder zwei zusätzliche Elemente benötigen, sind die ::before und ::after Pseudo-Elemente sind die Lösung. Ihr HTML bleibt exakt so, wie es war:
<ul>
<li><a href="#">home</a></li>
</ul>Und die beiden zusätzlichen Elemente werden vollständig in CSS definiert:
a::before { content: ""; }
a::after { content: ""; }Gestalten Sie diese wie gewohnt in Ihrem Stylesheet. Es ist nicht nötig, sie im HTML zu deklarieren, da der Browser sie automatisch an die Hauptkomponente anhängt und das Markup unangetastet lässt. Der einzige Unterschied ist die content -Eigenschaft, die einen String entgegennimmt. Stellen Sie sich das wie den Text innerhalb eines div-Elements vor, nur dass Sie dies von der CSS-Seite aus steuern. So wurde a::before gestaltet, mit einem leeren String für content , sodass nichts weiter als diese kleine Ecke erzeugt wird:
a::before {
content: "";
position: absolute;
bottom: 12px;
left: 12px;
width: 12px;
height: 12px;
border: 3px solid #FCD63F;
border-width: 0 0 3px 3px;
opacity: 0;
transition: all 0.3s;
}Und der Hover-Zustand, in den es übergeht:
a:hover::before {
opacity: 1;
bottom: -8px;
left: -8px;
}Benötigen Sie mehr als zwei zusätzliche Elemente? Dann verwenden Sie Standard-HTML-Komponenten. Ändern Sie die Struktur, fügen Sie ungestylte Spans ein, gestalten Sie diese und wenden Sie die Transition oder Animation an. Mehrere Komponenten sind auch dann sinnvoll, wenn verschiedene Bewegungsabläufe gleichzeitig stattfinden sollen, da jede Komponente immer nur eine Animation oder Transition gleichzeitig ausführen kann. Der Ladeeffekt unten ist genau das: ein div namens container mit vier Spans darin, wobei der Container eine Animation zum Wachsen hat und jeder Span eine weitere zum Rotieren.
<div class="container">
<span></span>
<span></span>
<span></span>
<span></span>
</div>Genau hieraus ergibt sich auch Ihre Aufwandsschätzung. Ein Effekt, der keine inneren Komponenten benötigt, ist eine reine Änderung am Stylesheet. Ein Effekt, der vier benötigt, erfordert eine Änderung am Markup – was bedeutet: Review, Cross-Browser-Tests und eine Komponente, die jemand auch in einem Jahr noch verstehen muss.
Wie implementiert man also einen Übergang? Beginnen Sie damit, einen Anfangs- und einen Endzustand für jedes beteiligte Element zu definieren, einschließlich der ::before und ::after Komponenten. Die transition -Eigenschaft legt dann fest, wie sich diese Komponenten dazwischen verhalten sollen. Sie setzt sich aus vier weiteren Eigenschaften zusammen: transition-delay und transition-duration, das zeitbezogene Paar, das wir bereits unter Animation Timing behandelt haben, sowie transition-property und transition-timing-function.
Siehe den Pen transition property von Patrícia Silva (@patsilva_tese) auf CodePen.
Schauen wir uns die letzten beiden an.
Dies legt fest, welche Eigenschaften betroffen sind. Setzen Sie es auf all und jede Eigenschaft, die sich zwischen den beiden Stilen ändert, wird erfasst. Oder benennen Sie eine bestimmte Eigenschaft oder eine Gruppe davon, was sinnvoll ist, wenn verschiedene Eigenschaften mit unterschiedlichen Geschwindigkeiten animiert werden sollen. Angenommen, die Hintergrundfarbe soll sich deutlich schneller ändern als die Textfarbe:
transition-property: background-color, color;
transition-duration: 0.2s, 1s;Die Timing-Funktion bestimmt die Geschwindigkeit des Übergangs. Sie bietet eine Auswahl an Schlüsselwortwerten sowie zwei Funktionen, mit denen Sie Ihre eigene Kurve definieren können:
linear, konstante Geschwindigkeit während des gesamten Verlaufs;ease-in, beginnt langsam und wird dann schneller;ease-out, beginnt schnell und wird dann langsamer;ease-in-out, eine Mischung aus beidem: erst langsam, dann schneller, zum Schluss wieder langsam;ease, eine Variante der vorherigen Funktion und der Standardwert dieser Eigenschaft;steps(n), das zwischen n diskreten Zuständen springt, anstatt zu interpolieren. So werden Sprite-Sheet- und Schreibmaschineneffekte erstellt;cubic-bezier(x1, y1, x2, y2), womit Sie Ihre eigene Beschleunigungskurve definieren können, wenn keine der Schlüsselwörter passt;linear(), eine neuere Ergänzung, die Federn, Sprünge und andere komplexe Easing-Effekte durch Auflistung von Punkten entlang der Kurve annähert. Da es mittlerweile von den meisten Browsern unterstützt wird, benötigen Sie für einen Bounce-Effekt kein JavaScript mehr.Siehe den Pen mögliche Werte für transition-timing-function von Patrícia Silva (@patsilva_tese) auf CodePen.
Im Gegensatz zu Transitions benötigt die animation -Eigenschaft weder eine Liste der betroffenen Eigenschaften noch einen expliziten Start- und Endzustand. Diese Freiheit verdanken wir den Keyframes. Keyframes definieren die verschiedenen Zustände der Komponente unter einem Namen, den Sie dann an die animation -Eigenschaft übergeben. Bei zwei Zuständen reichen from und to aus. Wenn Sie mehr benötigen, verwenden Sie Prozentangaben, wie bei der rotate -Animation des Ladeeffekts:
@keyframes rotate {
0% { transform: rotate(0deg); }
10% { transform: rotate(0deg); }
50% { transform: rotate(90deg); }
90% { transform: rotate(90deg); }
100% { transform: rotate(90deg); }
}Wie transitionist auch die animation -Eigenschaft eine Zusammenfassung mehrerer anderer Eigenschaften. Sie umfasst animation-duration, animation-delay und animation-timing-function, die sich genauso verhalten wie ihre Entsprechungen bei den Übergängen unter Animation Timing. Dann animation-name, wo der Name des Keyframes eingetragen wird. Dann animation-iteration-count, eine bestimmte Zahl oder infinite. Dann animation-play-state, das running oder paused akzeptiert und es Ihnen ermöglicht, eine Animation über eine Klasse oder ein Skript anzuhalten. Und schließlich animation-direction und animation-fill-mode, beide weiter unten.
animation-fill-mode ist der Punkt, der viele stolpern lässt. Er beantwortet eine Frage, die man sich meist erst stellt, wenn etwas nicht wie gewünscht aussieht: Was passiert mit dem Element außerhalb der eigentlichen Laufzeit der Animation?
Siehe den Pen animation-direction von Patrícia Silva (@patsilva_tese) auf CodePen.
So gut wie jede Eigenschaft, sofern sie in Einheitenwerten angegeben ist. Farben, Höhe und Breite, Abstände und Innenabstände, Deckkraft, Transformationen: alles kein Problem. Rahmenstil, Position, Float, background-image, font-family: haben keinerlei Effekt. Die MDN-Referenz zu animierbaren CSS-Eigenschaften enthält die vollständige Liste.
Doch animierbar ist nicht gleichbedeutend mit performant. Wenn ein Browser eine Seite rendert, durchläuft er eine Abfolge von Schritten: Layout, bei dem berechnet wird, wo sich jedes Element befindet und wie groß es ist; Paint, bei dem die Pixel gefüllt werden; und Composite, bei dem die gezeichneten Ebenen auf dem Bildschirm zusammengesetzt werden. Animiert man etwas, das ein Layout auslöst, wie etwa width, muss der Browser in jedem einzelnen Frame auch Paint und Composite neu berechnen. Deshalb sollten Eigenschaften, die nur den Composite-Schritt betreffen, wie transform und opacity, bevorzugt werden. Der web.dev-Leitfaden von Google zu CSS-Übergängen erläutert, warum transform die flüssige und akkuschonende Wahl ist.
Wenn Sie wissen, dass ein Element animiert werden soll, können Sie dem Browser mit dem folgenden Befehl einen Hinweis geben: will-change -Eigenschaft, damit die Ebene vorab hochgestuft wird. Setzen Sie sie sparsam ein: Alles hochzustufen verfehlt den Zweck und verbraucht unnötig Arbeitsspeicher.
Die Browserunterstützung ist kein Hindernis mehr. Übergänge und Animationen sind seit Jahren Teil der Baseline -Sammlung weit verbreiteter Funktionen in allen gängigen Engines. Die Wahl Ihrer Eigenschaft entscheidet jedoch weiterhin darüber, wie viele dieser drei Rendering-Phasen der Browser sechzigmal pro Sekunde auf dem jeweiligen Gerät, auf dem die Seite geöffnet wird, wiederholen muss.
Siehe den Pen JjKbdeE von Patrícia Silva (@patsilva_tese) auf CodePen.
Wie bereits erwähnt, transform ist eine der kostengünstigsten Eigenschaften für Animationen. Kostengünstig bedeutet jedoch nicht eingeschränkt. Sie bietet Ihnen zahlreiche Möglichkeiten:
translate(x, y), verschiebt ein Element um x Pixel horizontal und um y Pixel vertikal. Negative Werte bewegen es nach links oder oben, positive nach rechts oder unten.rotate(y), rotiert ein Element um y Grad. Positive Werte drehen im Uhrzeigersinn, negative gegen den Uhrzeigersinn. Standardmäßig dreht sich das Element um seinen Mittelpunkt, was Sie mit der Eigenschaft transform-origin anpassen können.scale(x, y), verändert die Größe. Zwei Werte skalieren die Breite um den Faktor x und die Höhe um den Faktor y Mal. Ein Wert ändert beides um diesen Faktor und behält die Proportionen des Elements bei. Verwenden Sie scaleX(x) und scaleY(y) um eine Achse gezielt anzusprechen. Werte über 1 vergrößern, Werte zwischen 0 und 1 verkleinern das Element.skew(x, y), neigt das Element um x Grad horizontal und um y Grad vertikal. Geben Sie nur einen Wert an, wird nur die X-Achse beeinflusst, wobei y auf 0 gesetzt wird. Wie bei scale zielen skewX() und skewY() auf die jeweilige Achse einzeln ab.matrix(a, b, c, d, tx, ty), das Skalierung, Neigung und Verschiebung in einer einzigen Deklaration kombiniert und sechs Werte in dieser Reihenfolge entgegennimmt.Diese drehen sich alle um die Mitte des Elements, es sei denn, Sie ändern transform-origin. Dies akzeptiert ein oder zwei Prozentwerte oder eines der Schlüsselwörter top, bottom, right, left und center. Beachten Sie die amerikanische Schreibweise beim letzten Begriff: Sie ist so in der CSS-Spezifikation definiert und die einzige Form, die der Browser akzeptiert.
Wenn Sie den Code der früheren Animationen durchsucht haben, ist Ihnen vielleicht aufgefallen, dass wir nicht durchgehend transform verwenden. Das bedeutet nicht, dass dieselben Animationen nicht auch allein mit Transformationen erstellt werden könnten. Wir haben daher beide Effekte nur mit transformnachgebaut, um dies zu zeigen. Die HTML-Struktur bleibt dabei exakt gleich.
Siehe den Pen frühere Animationen mit transform von Patrícia Silva (@patsilva_tese) am CodePen.
Hier ist die Entwicklung, die die Bedeutung von „CSS-Animation“ im Jahr 2026 grundlegend verändert. Eine scroll-gesteuerte Animation verknüpft eine @keyframes -Sequenz mit der Scroll-Position anstatt mit dem Zeitverlauf. Der „Reveal-on-Scroll“-Effekt, für den früher noch ein IntersectionObserver, ein Scroll-Listener oder eine Bibliothek wie GSAP erforderlich war, besteht nun aus nur drei Zeilen CSS und läuft auf dem Compositor-Thread statt auf dem Main-Thread.
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.card {
animation: fade-in linear;
animation-timeline: view();
}Zwei Funktionen steuern dies. scroll() verknüpft die Animation mit dem Gesamtfortschritt eines Scroll-Containers – genau das, was man für eine Lese-Fortschrittsanzeige benötigt. view() verknüpft sie mit der Position eines spezifischen Elements innerhalb des Viewports, ideal für Einblendeffekte. Der Leitfaden zu scroll-gesteuerten Animationen auf MDN deckt die vollständige API ab.
Ein ehrlicher Hinweis zur Unterstützung: Chromium-Browser unterstützen dies seit Chrome 115 im Juli 2023 ohne Flag, und Safari hat es im September 2025 mit Version 26 hinzugefügt. Mitte 2026 ist das Feature in der stabilen Version von Firefox noch hinter einem Flag verborgen, daher liegt die globale Unterstützung bei etwa 82 Prozent und das Feature ist noch nicht ganz Baseline. Betrachten Sie es als progressive Erweiterung: Definieren Sie den eingeblendeten Zustand als Standard, kapseln Sie die Bewegung in @supports (animation-timeline: scroll()), und der Fehlerfall ist lediglich „keine Animation“ statt einer defekten Seite. Kapseln Sie es zusätzlich in prefers-reduced-motion , da scroll-gebundene Bewegungen bei Nutzern mit vestibulären Störungen besonders leicht Unbehagen auslösen können.
Ein verwandtes Paar, das man kennen sollte: @starting-style zusammen mit transition-behavior: allow-discrete ermöglicht es Ihnen endlich, ein Element in und aus display: nonezu animieren – genau das, was Sie für Dialoge, Popover und Toasts benötigen, für die früher JavaScript erforderlich war.
Stellen Sie sich den Haupt-Thread des Browsers wie eine einspurige Straße vor. Layout, Rendering und jede Zeile Ihres JavaScript-Codes müssen sich hier einreihen. Wenn eine rechenintensive Aufgabe die Spur blockiert, muss alles dahinter warten. CSS-Animationen können – je nachdem, welche Eigenschaften Sie ändern – eine zweite Spur nutzen, den sogenannten Compositor-Thread. Animationen auf dem Haupt-Thread geraten ins Stocken, wenn es zu einem Stau kommt. Animationen auf dem Compositor laufen flüssig weiter.
Die Konsequenz ist messbar. Ein Browser hat etwa 16 Millisekunden Zeit, um jedes Bild bei 60 Bildern pro Sekunde zu erzeugen – abzüglich des eigenen Overheads sogar noch weniger. Wird dieses Zeitfenster überschritten, geht ein Frame verloren, was der Nutzer als Ruckeln wahrnimmt. Beschränken Sie Animationen auf transform und opacity und die Arbeit wird vollständig vom kritischen Pfad ausgelagert. Die Wahl der Eigenschaft entscheidet weit mehr als die Entscheidung zwischen CSS und JavaScript darüber, ob eine Animation ihre Bildrate halten kann.
Das ist für uns keine graue Theorie. Als unser Front-End-Team das Dashboard von AppTweak mit React und TypeScript neu entwickelte, war die Entlastung des Haupt-Threads ein wesentlicher Faktor dafür, dass die Ladezeit um 80 Prozent gesenkt werden konnte. Dasselbe Prinzip, das ein Dashboard reaktionsschnell hält, sorgt auch für flüssige Animationen.
Das ist auch wirtschaftlich relevant, denn die gefühlte Geschwindigkeit ist das, was Nutzer tatsächlich wahrnehmen. Reaktionsfähigkeit hat mittlerweile mit den Core Web Vitals einen eigenen Standard: Interaction to Next Paint (INP) hat am 12. März 2024 das First Input Delay als Google-Ranking-Signal abgelöst. Es misst die gesamte Latenz vom Tippen des Nutzers bis zum nächsten gerenderten Frame über den gesamten Besuch hinweg, nicht nur bei der ersten Interaktion. Googles eigene Search Central-Ankündigung erläutert diese Änderung, und das MDN bietet eine verständliche Definition von INP. Eine Animation, die den Haupt-Thread blockiert, verschlechtert diesen Wert direkt. Eine Animation auf dem Compositor hingegen nicht.
JavaScript hat nach wie vor seine Berechtigung. Nutzen Sie es, wenn eine Animation während des Ablaufs auf Logik reagieren muss oder wenn Sie die präzise Steuerung der Web Animations API benötigen. Für die meisten Bewegungen im Interface ist CSS die schnellere und effizientere Lösung. Wenn Sie eine zweite Meinung dazu benötigen, wo Ihr Interface an Performance verliert, ist genau dafür ein technisches UX-Audit da.
Bewegung ist nicht neutral. Bei Nutzern mit Gleichgewichtsstörungen können große oder wiederholte Bewegungen Übelkeit und Schwindel auslösen. Genau deshalb bieten Betriebssysteme eine Einstellung zur Reduzierung von Bewegungen an und deshalb führt die WCAG 2.1 „Animation from Interactions“ als Erfolgskriterium auf. Diese Einstellung zu ignorieren, ist ein Mangel an Barrierefreiheit. Bei Kunden aus dem öffentlichen Sektor oder dem Unternehmensbereich ist es zudem ein Verstoß gegen Compliance-Vorgaben.
CSS liest die Einstellung direkt über die prefers-reduced-motion Media Query aus. Der sicherste Standard ist es, Ihre Animationen beizubehalten und sie für alle Nutzer zu neutralisieren, die weniger Bewegung angefordert haben:
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}Die Dauer von nahezu null statt none ist beabsichtigt. So kann jeder animationend Handler weiterhin ausgelöst werden, damit kein JavaScript-Code auf ein Ereignis wartet, das niemals eintritt. Und dort, wo Bewegung eine Bedeutung hat und nicht nur dekorativ ist – wie etwa bei einer Ladeanzeige –, sollten Sie diese durch ein statisches oder ein- und ausblendendes Äquivalent ersetzen, anstatt das Feedback komplett zu entfernen. Ein saubereres Muster für neue Projekte ist der umgekehrte Ansatz: Definieren Sie die reduzierte Version als Standard und fügen Sie Bewegung nur innerhalb von @media (prefers-reduced-motion: no-preference)hinzu.
Animationen werden als Feinschliff geschätzt, aber als technischer Aufwand bezahlt. Betrachtet man Animationstiming und interne Komponenten, verteilen sich die Kosten auf drei Bereiche, die man vor Beginn der Umsetzung benennen sollte.
Der erste Bereich ist die Entwicklungszeit, die sich durch die internen Komponenten vorhersagen lässt. Ein Übergang für ein bestehendes Element erfordert nur wenige Zeilen Code und ist inklusive Überprüfung in unter einer Stunde erledigt. Eine Keyframe-Sequenz, die vier interne Komponenten benötigt, ist ein ganz anderes Kaliber: Markup-Anpassungen, deren Prüfung, Cross-Browser-Tests und eine Komponente, die später jemand anderes übernehmen muss. Realistisch gesehen dauert das eher einen Tag als eine Stunde. Dieses Verhältnis ist der Wert, den man in eine Schätzung einfließen lassen sollte.
Der zweite Bereich ist das Performance-Risiko. Eine Animation, die Layout-Änderungen auslöst, ist auf einem schnellen Rechner für Entwickler nicht spürbar langsamer. Sie zeigt sich erst auf Mittelklasse-Smartphones, wo dasselbe 16-Millisekunden-Zeitfenster pro Frame mit einem Bruchteil der Rechenleistung eingehalten werden muss. Dort wird eine ruckelnde Oberfläche vom Nutzer als langsame Website wahrgenommen, nicht als fehlerhafte Animation. Die Wahl von transform statt width kostet bei der Entwicklung nichts und eliminiert das Risiko vollständig. Unser Rebuild des AppTweak-Dashboards ist der Beweis: Die 80 Prozent Performance-Gewinn kamen dadurch zustande, dass wir den Main-Thread entlastet haben, anstatt ihn zusätzlich zu belasten.
Der dritte Bereich ist die Wartung. Jede Animation ist ein Zustand, in dem sich Ihre Oberfläche befinden kann, und jeder einzelne muss auch das nächste Redesign überstehen. Timing und interne Komponenten helfen auch hier. Ein Effekt, der auf einer klaren Timing-Regel und einem kleinen, benannten Satz interner Komponenten basiert, ist für andere Entwickler verständlich und lässt sich anpassen, ohne die gesamte Komponente auseinandernehmen zu müssen. Es ist dieselbe Disziplin, die ein Design-System wertvoll macht, und der Grund, warum es sich auszahlt, einen UI-Entwickler zu haben, der das Frontend verantwortet , anstatt ein Stylesheet, für das sich niemand zuständig fühlt.
Es gibt eine ähnliche Einschätzung bei der Wahl der Werkzeuge. Als wir FlippedNormals von WordPress auf eine maßgeschneiderte Plattform auf AWS migriert haben, lautete die Entscheidung nicht abstrakt „Custom ist besser“. Der Grund war, dass der bestehende Stack das Wachstum begrenzte; die Migration hat sich also durch mehr Spielraum und einen Anstieg des Traffics von selbst bezahlt gemacht. Bei Animationsentscheidungen ist es genauso. Die Frage ist nicht, ob Bewegung es wert ist. Die Frage ist, welche Interaktionen den strukturellen Aufwand rechtfertigen und welche durch einen einfachen Übergang auf einer Compositor-only-Eigenschaft perfekt abgedeckt sind.
Für die meisten Interface-Aufgaben: ja. CSS-Animationen für transform und opacity können an den Compositor-Thread übergeben werden und laufen weiter, während der Haupt-Thread ausgelastet ist. JavaScript-Animationen hingegen laufen auf dem Haupt-Thread und konkurrieren dort mit allen anderen Prozessen. JavaScript ist jedoch das richtige Werkzeug, wenn eine Animation während des Ablaufs auf Logik reagieren muss oder wenn Sie die präzisere Steuerung der Web Animations API benötigen.
transform und opacity, da sie nur den Composite-Schritt der Rendering-Pipeline auslösen. Das Animieren von width, height, margin, padding oder oben und links löst ein Layout aus, was dazu führt, dass Paint und Composite in jedem Frame erneut ausgeführt werden. Die Referenz für animierbare Eigenschaften auf MDN listet auf, was verfügbar ist.
Eine Transition läuft zwischen zwei Zuständen ab und benötigt einen Auslöser, meist ein Hover-Ereignis oder eine Klassenänderung. Eine Animation läuft eigenständig, benötigt keinen Auslöser und kann über @keyframes -Prozentwerte beliebig viele Zwischenzustände definieren. Transition für einen Zustandswechsel. Animation für eine Sequenz.
In den meisten Browsern ja. Scroll-gesteuerte Animationen verwenden animation-timeline mit scroll() oder view() , um eine Keyframe-Sequenz an die Scroll-Position zu binden – komplett in CSS und ausgeführt auf dem Compositor-Thread. Die Unterstützung ist breit, aber Mitte 2026 noch nicht universell (Firefox Stable erfordert noch ein Flag), daher sollte man es in @supports und behandeln Sie es als progressive Enhancement. Siehe den MDN-Leitfaden zu scrollbasierten Animationen.
Meistens liegt es daran, dass eine Eigenschaft animiert wird, die ein Layout auslöst. Dadurch muss der Browser in jedem Frame die Geometrie neu berechnen und überschreitet das 16-Millisekunden-Zeitfenster. Prüfen Sie zuerst, welche Eigenschaften Sie animieren, und ersetzen Sie diese nach Möglichkeit durch die entsprechenden transform-Pendants: translate() statt top und left, scale() statt width und height.
Berücksichtigen Sie die prefers-reduced-motion: reduce Media-Query, die die vom Benutzer auf Betriebssystemebene gewählte Einstellung für reduzierte Bewegung abfragt. Verkürzen Sie die Dauer auf nahezu null, anstatt Animationen komplett zu entfernen, damit jeder Code, der auf animationend wartet, weiterhin ausgelöst wird. Und dort, wo Bewegung eine Bedeutung hat, wie etwa bei Ladeanzeigen, ersetzen Sie diese durch ein statisches Äquivalent, anstatt sie ganz wegzulassen.
Das können sie. Eine Animation im Haupt-Thread konkurriert mit der Ereignisverarbeitung, was sich negativ auf den Interaction to Next Paint auswirkt – den Core Web Vital für Reaktionsfähigkeit, der im März 2024 das First Input Delay abgelöst hat. Wenn Animationen über den Compositor mit transform und opacity ausgeführt werden, bleibt dieser Prozess außerhalb des kritischen Pfads.
Nicht für dieselbe Eigenschaft. Jedes Element kann pro Eigenschaft nur einen Übergang oder eine Animation ausführen. Genau deshalb werden komplexe Effekte aus inneren Komponenten aufgebaut: ::before und ::after für ein oder zwei zusätzliche Elemente, oder weitere Spans oder Divs, wenn Sie mehr benötigen, wobei jedes seine eigene Bewegung ausführt.
So wenige wie möglich, um die Bewegung darzustellen. Die drehen Die Animation im Ladeeffekt oben verwendet fünf, wobei drei davon lediglich dazu dienen, eine Position zu halten, anstatt zwischen ihnen zu wechseln. Das Halten eines Zustands bei 10 % und 90 % erzeugt die Pause. Das Hinzufügen von Keyframes, die keinen Wert ändern, bewirkt absolut nichts.
Animationen mit CSS zu erstellen, und zwar mit transform im Besonderen, sollte Ihr Standard sein. Wenn Sie das Timing und die internen Komponenten der Animation richtig einstellen und Eigenschaften wählen, die den Prozess im Compositor-Layer halten, ist das der entscheidende Unterschied zwischen einer flüssigen Oberfläche mit 60 Bildern pro Sekunde und einer, die auf der Hardware der meisten Nutzer ruckelt – und das kostet bei der Entwicklung keinen Cent extra. Gehen Sie sparsam mit Bewegungen um, respektieren Sie die „Bewegungen reduzieren“-Einstellung und denken Sie an das Wesentliche: Die Eigenschaft, die Sie animieren, ist wichtiger als die Anzahl der Animationen, die Sie schreiben.
Wenn Sie über Performance-Optimierungen im Frontend nachdenken oder eine zweite Meinung dazu benötigen, warum eine Oberfläche an Performance verliert, wirft unser Web- und Mobile-Entwicklungsteam gerne einen Blick darauf. Sehen Sie sich an, wie wir ähnliche Projekte umgesetzt haben oder nehmen Sie Kontakt mit uns auf.
Webentwickler mit einer besonderen Liebe zum Frontend. Mutter von Katzen. In meiner Freizeit versuche ich, den Planeten zu retten, indem ich umweltfreundliche Alternativen teile.
Alexandra Mendes ist Senior Growth Specialist bei Imaginary Cloud und verfügt über mehr als 3 Jahre Erfahrung in der Erstellung von Texten über Softwareentwicklung, KI und digitale Transformation. Nach Abschluss eines Frontend-Entwicklungskurses erwarb Alexandra einige praktische Programmierkenntnisse und arbeitet nun eng mit technischen Teams zusammen. Alexandra ist begeistert davon, wie neue Technologien Wirtschaft und Gesellschaft prägen. Sie liebt es, komplexe Themen in klare, hilfreiche Inhalte für Entscheidungsträger umzuwandeln.
People who read this post, also found these interesting:
.webp)
