CSS-animerede gradientbaggrunde, gjort ordentligt

En CSS-animeret gradient er en gradientbaggrund, der skifter farve eller position over tid. Der er en hage: skriver du to forskellige gradienter i en @keyframes-regel, blander browsere ikke mellem dem, de springer. Derfor animerer hver teknik, der virker, noget ved siden af gradienten: dens position, de brugerdefinerede egenskaber inde i den eller laget, den er malet på. Hvilken du vælger, afgør, hvor blød den ser ud, og hvor meget arbejde browseren har med hver frame.

For designsiden, altså hvornår bevægelse hjælper et brand, og hvordan du timer den, se animerede gradientbaggrunde. Denne guide er koden.

Teknik 1: flyt en overstor baggrund

Gør gradienten to til fire gange så stor som elementet med background-size, og animér derefter background-position, så en anden del af den vises over tid. Den virker i alle browsere og kræver ingen JavaScript. Brug alternate, så bevægelsen vender jævnt i stedet for at springe tilbage til starten.

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

Prisen: background-position kan browsere ikke flytte alene på grafikkortet, så elementet gentegnes ved hver frame. På en knap er det ingenting. På en helskærmshero er det reelt arbejde, der kører, så længe siden er åben.

Teknik 2: animér farvestop med @property

Brugerdefinerede egenskaber er normalt strenge, som ikke kan interpoleres. Registrerer du en med @property, får den en type, som <color>, <angle> eller <percentage>, og typede egenskaber animeres jævnt. Brug dem inde i gradienten, og du kan animere farverne, vinklen eller et stops position direkte. @property understøttes i alle nuværende større browsere. Tjek caniuse, hvis du understøtter æ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;
  }
}

Denne teknik gentegner stadig hver frame, ligesom den første. Fordelen er kontrol: du kan flytte ét skær i en mesh-gradient, rotere en konisk kant eller skifte en brandgradient mod en anden palet uden overstore baggrunde.

Teknik 3: transformér et gradientlag

Læg gradienten på et pseudoelement, der er meget større end elementet, og animér dets transform, for eksempel en langsom rotation eller drift. Browsere kan som regel flytte et transformeret lag på grafikkortet uden at gentegne det, så det er den billigste måde at animere en stor gradient på. will-change: transform antyder, at laget bør promoveres på forhånd.

.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: krydsfade to gradienter

Stak to gradientlag, og animér opacity på det øverste. Opacity er også en egenskab, der egner sig til compositoren, så fadet er jævnt og billigt. Det passer til langsomme stemningsskift, som en dagpalet, der fader over i en natpalet, og det lader de to gradienter være helt forskellige i opbygning.

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

Sådan vælger du en teknik

Mål i stedet for at gætte. I Chrome DevTools fremhæver panelet Rendering med paint flashing de områder, der gentegnes hver frame, og en Performance-optagelse viser, hvor stor en del af hver frame der går til tegning. CSS-gradienters ydeevne gennemgår det.

Reduceret bevægelse og god opførsel

Nogle mennesker bliver svimle eller forstyrrede af bevægelse i baggrunden, og operativsystemer lader dem bede om mindre af den. Respektér det med en prefers-reduced-motion-forespørgsel, der stopper animationen og efterlader en stille, færdig frame. Guiden om reduceret bevægelse forklarer, hvad der tæller som bevægelse, det er værd at fjerne.

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