Animerade gradientbakgrunder i CSS, gjorda rätt

En animerad gradient i CSS är en gradientbakgrund som ändrar färg eller position över tid. Det finns en hake: om du skriver två olika gradienter i en @keyframes-regel blandar webbläsarna inte mellan dem, de hoppar. Därför animerar varje fungerande teknik något bredvid gradienten i stället: dess position, de egna egenskaperna inuti den eller lagret den är målad på. Vilken du väljer avgör hur mjuk den ser ut och hur mycket arbete webbläsaren gör i varje bildruta.

För designsidan, när rörelse hjälper ett varumärke och hur du tar tempot, se animerade gradientbakgrunder. Den här guiden är koden.

Teknik 1: flytta en överdimensionerad bakgrund

Gör gradienten två till fyra gånger så stor som elementet med background-size och animera sedan background-position så att en annan del av den syns över tid. Det fungerar i alla webbläsare och kräver ingen JavaScript. Använd alternate så att rörelsen vänder mjukt i stället för att hoppa tillbaka till början.

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

Kostnaden: background-position kan inte flyttas enbart på grafikkortet, så elementet ritas om i varje bildruta. På en knapp är det ingenting. På en helskärmshero är det verkligt arbete som pågår så länge sidan är öppen.

Teknik 2: animera färgstopp med @property

Egna egenskaper är normalt strängar, som inte kan interpoleras. Om du registrerar en med @property får den en typ, som <color>, <angle> eller <percentage>, och typade egenskaper animeras mjukt. Använd dem inuti gradienten så kan du animera färgerna, vinkeln eller positionen för ett stopp direkt. @property stöds i alla nuvarande stora webbläsare. Kolla caniuse om du stöder äldre.

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

Den här tekniken ritar också om varje bildruta, precis som den första. Dess fördel är kontroll: du kan flytta ett sken i en mesh-gradient, rotera en konisk ram eller förskjuta en varumärkesgradient mot en andra palett utan några överdimensionerade bakgrunder.

Teknik 3: transformera ett gradientlager

Lägg gradienten på ett pseudoelement som är mycket större än elementet och animera dess transform, till exempel en långsam rotation eller drift. Webbläsare kan oftast flytta ett transformerat lager på grafikkortet utan att rita om det, så det här är det billigaste sättet att animera en stor gradient. will-change: transform antyder att lagret bör lyftas fram i förväg.

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

Teknik 4: tona mellan två gradienter

Stapla två gradientlager och animera opacity på det översta. Opacity är också en egenskap som sammanfogaren hanterar smidigt, så toningen är mjuk och billig. Den passar långsamma stämningsskiften, som en dagpalett som tonar över i en nattpalett, och låter de två gradienterna vara helt olika uppbyggda.

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

Att välja teknik

Mät i stället för att gissa. I Chrome DevTools markerar panelen Rendering med paint flashing de ytor som ritas om i varje bildruta, och en Performance-inspelning visar hur stor del av varje bildruta som går åt till ritning. CSS-gradienter och prestanda går igenom det.

Reducerad rörelse och god ton

Vissa blir yra eller distraherade av rörelse i bakgrunden, och operativsystemen låter dem be om mindre av den. Respektera det med en prefers-reduced-motion-fråga som stoppar animationen och lämnar en stillastående, färdig bild. Guiden om reducerad rörelse förklarar vad som räknas som rörelse värd att ta bort.

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