Animierte CSS-Farbverlaufshintergründe, richtig gemacht

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.

Zur Designseite, dazu, wann Bewegung einer Marke hilft und wie du sie taktest, siehe animierte Farbverlaufshintergründe. 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.

.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 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 <color>, <angle> oder <percentage>, 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, falls du ältere unterstützt.

@property --from {
  syntax: "<color>";
  inherits: false;
  initial-value: #7c3aed;
}
@property --to {
  syntax: "<color>";
  inherits: false;
  initial-value: #f472b6;
}
@property --angle {
  syntax: "<angle>";
  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;
  }
}

Diese Technik zeichnet wie die erste in jedem Frame neu. Ihr Vorteil ist die Kontrolle: Du kannst ein Leuchten in einem Mesh-Verlauf bewegen, einen konischen Rahmen 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.

.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); }
}

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.

.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; }
}

Die Technik wählen

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 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.

@media (prefers-reduced-motion: reduce) {
  .hero,
  .hero::before,
  .sky::after {
    animation: none;
  }
}