Animerte gradientbakgrunner med CSS, gjort riktig

En animert gradient i CSS er en gradientbakgrunn som skifter farge eller posisjon over tid. Det er en hake: hvis du skriver to ulike gradienter i en @keyframes-regel, blander ikke nettleserne mellom dem, de hopper. Derfor animerer hver teknikk som virker, noe ved siden av gradienten i stedet: posisjonen, de egendefinerte egenskapene inni den eller laget den er malt på. Hvilken du velger, avgjør hvor jevn den ser ut og hvor mye arbeid nettleseren gjør for hvert bilde.

For designsiden, når bevegelse hjelper en merkevare og hvordan du setter tempoet, se animerte gradientbakgrunner. Denne guiden er koden.

Teknikk 1: flytt en overdimensjonert bakgrunn

Gjør gradienten to til fire ganger så stor som elementet med background-size, og animer deretter background-position så en ulik del av den vises over tid. Det virker i alle nettlesere og trenger ingen JavaScript. Bruk alternate så bevegelsen snur jevnt i stedet for å hoppe tilbake til start.

.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 er ikke noe nettlesere kan flytte på grafikkortet alene, så elementet tegnes om for hvert bilde. På en knapp er det ingenting. På en fullskjerms hero er det reelt arbeid som pågår så lenge siden er åpen.

Teknikk 2: animer fargestopp med @property

Egendefinerte egenskaper er vanligvis tekststrenger, som ikke kan interpoleres. Å registrere en med @property gir den en type, som <color>, <angle> eller <percentage>, og typede egenskaper animeres jevnt. Bruk dem inne i gradienten, så kan du animere fargene, vinkelen eller posisjonen til et stopp direkte. @property støttes i alle gjeldende store nettlesere. Sjekk caniuse hvis du støtter eldre.

@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 teknikken tegner også om for hvert bilde, som den første. Fordelen er kontroll: du kan flytte én glød i en mesh-gradient, rotere en konisk kant eller skifte en merkevaregradient mot en andre palett uten overdimensjonerte bakgrunner.

Teknikk 3: transformer et gradientlag

Legg gradienten på et pseudoelement som er mye større enn elementet, og animer dens transform, for eksempel en langsom rotasjon eller drift. Nettlesere kan som regel flytte et transformert lag på grafikkortet uten å tegne det om, så dette er den billigste måten å animere en stor gradient på. will-change: transform antyder at laget bør løftes ut 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); }
}

Teknikk 4: kryssutton to gradienter

Stable to gradientlag og animer opacity på det øverste. Opacity er også en egenskap som passer godt for sammensetteren, så uttoningen er jevn og billig. Den passer til langsomme stemningsskifter, som en dagspalett som tones ut i en nattpalett, og den lar de to gradientene være helt ulike i oppbygning.

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

Slik velger du teknikk

Mål i stedet for å gjette. I Chrome DevTools fremhever paint flashing i Rendering-panelet områder som tegnes om for hvert bilde, og en Performance-opptak viser hvor mye av hvert bilde som går til tegning. CSS-gradientytelse går gjennom det.

Redusert bevegelse og god folkeskikk

Noen blir svimle eller distrahert av bevegelse i bakgrunnen, og operativsystemer lar dem be om mindre av den. Respekter det med en prefers-reduced-motion-spørring som stopper animasjonen og lar et stille, ferdig bilde bli igjen. Guiden om redusert bevegelse forklarer hva som regnes som bevegelse verdt å fjerne.

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