# Animierte CSS-Farbverlaufshintergründe, richtig gemacht [Canonical HTML page](https://gradiently.design/de/guide/css-animated-gradient) Farbverläufe lassen sich nicht direkt animieren, aber alles um sie herum schon. Vier Techniken, was jede den Browser kostet und wie du Bewegung ruhig und optional hältst. ## The short version - Browser können nicht zwischen zwei Farbverlaufswerten interpolieren, deshalb bewegt, blendet oder transformiert ein animierter CSS-Farbverlauf den Verlauf, statt ihn direkt zu animieren. - Die klassische Technik macht den Hintergrund größer als das Element und animiert background-position, was überall funktioniert, aber in jedem Frame neu zeichnet. - Mit @property registrierte benutzerdefinierte Eigenschaften lassen den Browser einzelne Farben, Winkel und Positionen innerhalb eines Farbverlaufs animieren. - Transform oder Opacity auf einer eigenen Verlaufsebene zu animieren ist meist die günstigste Option, weil Browser das oft ohne Neuzeichnen zusammensetzen können. - Jede Verlaufsanimation sollte anhalten oder nahezu stillstehen, wenn Nutzende reduzierte Bewegung angefragt haben. Ein **animierter CSS-Farbverlauf** ist ein Verlaufshintergrund, der im Lauf der Zeit Farbe oder Position ändert. Es gibt einen Haken: Schreibst du zwei verschiedene Verläufe in eine `@keyframes`-Regel, blenden Browser nicht dazwischen über, sondern springen. Deshalb animiert jede funktionierende Technik stattdessen etwas neben dem Verlauf: seine Position, die benutzerdefinierten Eigenschaften darin oder die Ebene, auf die er gemalt ist. Welche du wählst, entscheidet, wie flüssig es aussieht und wie viel Arbeit der Browser in jedem Frame hat. - Bild 1: Abenddämmerung: `linear-gradient(120deg, #1e1b4b, #7c3aed 45%, #f472b6)` - Bild 2: später: `linear-gradient(160deg, #1e1b4b, #6d28d9 35%, #fb7185)` - Bild 3: Glut: `linear-gradient(200deg, #1e1b4b, #4c1d95 30%, #fb923c)` Drei Momente einer langsamen Animation. Richtung und Farbe bewegen sich, aber die Palette bleibt eine Familie. Zur Designseite, dazu, wann Bewegung einer Marke hilft und wie du sie taktest, siehe [animierte Farbverlaufshintergründe](https://gradiently.design/de/guide/animated-gradient-background). Dieser Leitfaden ist der Code. ## Technik 1: einen übergroßen Hintergrund bewegen Mache den Verlauf mit `background-size` zwei- bis viermal so groß wie das Element und animiere dann `background-position`, sodass im Lauf der Zeit ein anderer Teil sichtbar wird. Das funktioniert in jedem Browser und braucht kein JavaScript. Nutze `alternate`, damit sich die Bewegung sanft umkehrt, statt an den Anfang zurückzuspringen. ```css .hero { background-color: #1e1b4b; background-image: linear-gradient(120deg, #1e1b4b, #7c3aed, #f472b6, #fb923c); background-size: 300% 300%; animation: pan 18s ease-in-out infinite alternate; } @keyframes pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } ``` Der klassische animierte Farbverlauf. Langsame Dauern von 12 bis 30 Sekunden wirken eher als Ambiente denn als Unruhe. Der Preis: `background-position` können Browser nicht allein auf der Grafikkarte bewegen, daher wird das Element in jedem Frame neu gezeichnet. Bei einem Button ist das nichts. Bei einem bildschirmfüllenden Hero ist es echte Arbeit, die läuft, solange die Seite offen ist. ## Technik 2: Farbstopps mit @property animieren Benutzerdefinierte Eigenschaften sind normalerweise Zeichenfolgen, die sich nicht interpolieren lassen. Registrierst du eine mit `@property`, bekommt sie einen Typ wie ``, `` oder ``, und typisierte Eigenschaften lassen sich flüssig animieren. Nutzt du sie im Verlauf, kannst du die Farben, den Winkel oder die Position eines Stopps direkt animieren. `@property` wird in allen aktuellen großen Browsern unterstützt; prüfe [caniuse](https://caniuse.com/mdn-css_at-rules_property), falls du ältere unterstützt. ```css @property --from { syntax: ""; inherits: false; initial-value: #7c3aed; } @property --to { syntax: ""; inherits: false; initial-value: #f472b6; } @property --angle { syntax: ""; inherits: false; initial-value: 120deg; } .hero { background: linear-gradient(var(--angle), var(--from), var(--to)); animation: shift 16s ease-in-out infinite alternate; } @keyframes shift { to { --from: #0891b2; --to: #fb923c; --angle: 200deg; } } ``` Farben und Winkel animieren sich im Verlauf. Nicht registrierte Eigenschaften würden springen, statt überzublenden. - Start: Violett bis Pink: `linear-gradient(120deg, #7c3aed, #f472b6)` - Ende: Cyan bis Orange: `linear-gradient(200deg, #0891b2, #fb923c)` Die zwei Enden der obigen Animation. Der Browser mischt jedes Bild dazwischen. Diese Technik zeichnet wie die erste in jedem Frame neu. Ihr Vorteil ist die Kontrolle: Du kannst ein Leuchten in einem [Mesh-Verlauf](https://gradiently.design/de/guide/css-mesh-gradient) bewegen, einen [konischen Rahmen](https://gradiently.design/de/guide/css-gradient-border) drehen oder einen Markenverlauf zu einer zweiten Palette hin verschieben, ganz ohne übergroße Hintergründe. ## Technik 3: eine Verlaufsebene transformieren Lege den Verlauf auf ein Pseudoelement, das viel größer als das Element ist, und animiere dessen `transform`, etwa eine langsame Drehung oder Drift. Browser können eine transformierte Ebene meist auf der Grafikkarte bewegen, ohne sie neu zu zeichnen, daher ist das der günstigste Weg, einen großen Verlauf zu animieren. `will-change: transform` weist darauf hin, dass die Ebene vorab hochgestuft werden soll. ```css .hero { position: relative; overflow: hidden; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: -50%; z-index: -1; background: conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #0891b2, #1e1b4b); animation: turn 40s linear infinite; will-change: transform; } @keyframes turn { to { transform: rotate(1turn); } } ``` Ein riesiger konischer Farbverlauf, der sich langsam hinter dem Inhalt dreht. Der negative Inset hält die Ecken bedeckt, während er rotiert. ## Technik 4: zwei Farbverläufe überblenden Staple zwei Verlaufsebenen und animiere die `opacity` der oberen. Auch Opacity ist eine compositor-freundliche Eigenschaft, daher ist die Überblendung flüssig und günstig. Sie eignet sich für langsame Stimmungswechsel, etwa eine Tagespalette, die in eine Nachtpalette übergeht, und lässt die zwei Verläufe im Aufbau völlig verschieden sein. ```css .sky { position: relative; isolation: isolate; background: linear-gradient(180deg, #7dd3fc, #fde68a); } .sky::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #0f172a, #7c3aed); animation: dusk 20s ease-in-out infinite alternate; } @keyframes dusk { from { opacity: 0; } to { opacity: 1; } } ``` Der Tag geht in die Nacht über und zurück. Nur die Opacity ändert sich, also wird nichts neu gezeichnet. ## Die Technik wählen | Technik | Browserarbeit pro Frame | Am besten für | | --- | --- | --- | | `background-position` bewegen | Neuzeichnen | Kleine Elemente, Buttons, Text | | `@property`-Farben und -Winkel | Neuzeichnen | Präzise Farbwechsel, rotierende Rahmen | | `transform` auf einer Ebene | Meist nur Zusammensetzen | Große, bildschirmfüllende Hintergründe | | `opacity`-Überblendung | Meist nur Zusammensetzen | Langsame Stimmungs- oder Palettenwechsel | Neuzeichnen ist auf kleinen Flächen in Ordnung. Für große Flächen bevorzuge transform und opacity. Miss lieber, statt zu raten. In den Chrome DevTools hebt das Paint Flashing im Rendering-Bereich Flächen hervor, die in jedem Frame neu gezeichnet werden, und eine Performance-Aufzeichnung zeigt, wie viel jedes Frames ins Zeichnen fließt. [CSS-Farbverlauf und Performance](https://gradiently.design/de/guide/css-gradient-performance) geht es durch. ## Reduzierte Bewegung und gute Manieren Manchen Menschen wird von Hintergrundbewegung schwindlig, oder sie lenkt sie ab, und Betriebssysteme lassen sie weniger davon anfordern. Beachte das mit einer `prefers-reduced-motion`-Abfrage, die die Animation stoppt und ein stilles, fertiges Bild zurücklässt. Was an Bewegung entfernenswert ist, erklärt der Leitfaden zu [reduzierter Bewegung](https://gradiently.design/de/guide/reduced-motion). ```css @media (prefers-reduced-motion: reduce) { .hero, .hero::before, .sky::after { animation: none; } } ``` Eine Regel, die jede obige Technik stoppt. Prüfe, ob das zurückbleibende Bild noch stimmig aussieht. ### Vermeiden - Zyklen schneller als etwa 8 Sekunden auf großen Flächen - Regenbogen-Farbtonrotation über die ganze Seite - Bewegung hinter Fließtext, den Menschen lesen müssen - Animationen, die minutenlang weiterlaufen, wenn der Tab ruht ### Besser - Langsame Ambientebewegung innerhalb einer Farbfamilie - Bewegung im Hero, Ruhe im Inhalt - Ein ruhiges Standbild für reduzierte Bewegung - Auf einem durchschnittlichen Laptop und Handy testen, nicht nur auf einem schnellen Desktop ## FAQ ### Kann man einen CSS-Farbverlauf animieren? Nicht direkt: Browser springen in Keyframes zwischen zwei Verlaufswerten. Animiere stattdessen `background-position`, registrierte benutzerdefinierte Eigenschaften im Verlauf oder Transform und Opacity einer Verlaufsebene. ### Was ist der flüssigste Weg, einen Verlaufshintergrund zu animieren? `transform` oder `opacity` auf einer eigenen Verlaufsebene zu animieren, denn Browser kommen damit meist ohne Neuzeichnen aus. ### Wie animiere ich Verlaufsfarben in CSS? Registriere jede Farbe mit `@property` und `syntax: ""`, nutze die Eigenschaften im Verlauf und ändere sie in `@keyframes`. ### Verlangsamen animierte Farbverläufe eine Seite? Kleine selten. Große animierte Hintergründe, die in jedem Frame neu zeichnen, können Akku und Flüssigkeit kosten, bevorzuge also transform oder opacity und miss mit den DevTools. ### Wie beachte ich reduzierte Bewegung bei Verlaufsanimationen? Packe eine Regel `animation: none` in `@media (prefers-reduced-motion: reduce)`, sodass Nutzende, die weniger Bewegung anfordern, ein Standbild sehen.