# Animerte gradientbakgrunner med CSS, gjort riktig

[Canonical HTML page](https://gradiently.design/nb/guide/css-animated-gradient)

Gradienter kan ikke animeres direkte, men alt rundt dem kan. Fire teknikker, hva hver koster nettleseren, og hvordan du holder bevegelsen rolig og valgfri.

## The short version

- Nettlesere kan ikke interpolere mellom to gradientverdier, så en animert gradient i CSS flytter, tones ut eller transformerer gradienten i stedet for å animere den direkte.
- Den klassiske teknikken gjør bakgrunnen større enn elementet og animerer background-position, noe som virker overalt, men tegner om for hvert bilde.
- Å registrere egendefinerte egenskaper med @property lar nettleseren animere enkeltfarger, vinkler og posisjoner inne i en gradient.
- Å animere transform eller opacity på et eget gradientlag er som regel det billigste alternativet, fordi nettlesere ofte kan sette det sammen uten å tegne om.
- Hver gradientanimasjon bør stoppe, eller bli nesten stille, når brukeren har bedt om redusert bevegelse.

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.

- Bilde 1: skumring: `linear-gradient(120deg, #1e1b4b, #7c3aed 45%, #f472b6)`
- Bilde 2: senere: `linear-gradient(160deg, #1e1b4b, #6d28d9 35%, #fb7185)`
- Bilde 3: glør: `linear-gradient(200deg, #1e1b4b, #4c1d95 30%, #fb923c)`

Tre øyeblikk fra én langsom animasjon. Retning og farge beveger seg begge, men paletten forblir én familie.

For designsiden, når bevegelse hjelper en merkevare og hvordan du setter tempoet, se [animerte gradientbakgrunner](https://gradiently.design/nb/guide/animated-gradient-background). 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.

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

Den klassiske animerte gradienten. Langsomme varigheter på 12 til 30 sekunder føles som stemning, ikke uro.

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](https://caniuse.com/mdn-css_at-rules_property) hvis du støtter eldre.

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

Farger og vinkel som animeres inne i gradienten. Uregistrerte egenskaper ville hoppet i stedet for å blande.

- Start: fiolett til rosa: `linear-gradient(120deg, #7c3aed, #f472b6)`
- Slutt: cyan til oransje: `linear-gradient(200deg, #0891b2, #fb923c)`

De to endene av animasjonen over. Nettleseren blander hvert bilde imellom.

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](https://gradiently.design/nb/guide/css-mesh-gradient), rotere en [konisk kant](https://gradiently.design/nb/guide/css-gradient-border) 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.

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

En diger konisk gradient som dreier seg sakte bak innholdet. Den negative innrykkingen holder hjørnene dekket mens den roterer.

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

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

Dag går over i natt og tilbake. Bare opacity endres, så ingenting tegnes om.

## Slik velger du teknikk

| Teknikk | Nettleserarbeid per bilde | Best til |
| --- | --- | --- |
| Flytte `background-position` | Tegner om | Små elementer, knapper, tekst |
| `@property`-farger og -vinkler | Tegner om | Presise fargeendringer, roterende kanter |
| `transform` på et lag | Som regel bare sammensetting | Store, fullskjermsbakgrunner |
| `opacity`-kryssutton | Som regel bare sammensetting | Langsomme stemnings- eller palettskifter |

Å tegne om er greit på små flater. På store flater bør du foretrekke transform og opacity.

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](https://gradiently.design/nb/guide/css-gradient-performance) 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](https://gradiently.design/nb/guide/reduced-motion) forklarer hva som regnes som bevegelse verdt å fjerne.

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

Én regel som stopper hver teknikk over. Sjekk at bildet som blir igjen, fortsatt ser riktig ut.

### Unngå

- Sykluser raskere enn omtrent 8 sekunder på store flater
- Regnbuerotasjon av fargetone over hele siden
- Bevegelse bak brødtekst folk må lese
- Animasjoner som fortsetter å gå mens fanen er ubrukt i minutter

### Gjør

- Langsom stemningsbevegelse innenfor én fargefamilie
- Bevegelse i heroen, ro i innholdet
- Et rolig stillbilde til redusert bevegelse
- Test på en beskjeden bærbar og mobil, ikke bare en rask stasjonær

## FAQ

### Kan du animere en CSS-gradient?

Ikke direkte: nettlesere hopper mellom to gradientverdier i keyframes. Animer i stedet `background-position`, registrerte egendefinerte egenskaper brukt inne i gradienten, eller transform og opacity på et gradientlag.

### Hva er den jevneste måten å animere en gradientbakgrunn på?

Å animere `transform` eller `opacity` på et eget gradientlag, fordi nettlesere som regel kan håndtere dem uten å tegne om.

### Hvordan animerer jeg gradientfarger i CSS?

Registrer hver farge med `@property` med `syntax: "<color>"`, bruk egenskapene i gradienten og endre dem i `@keyframes`.

### Gjør animerte gradienter en side tregere?

Små gjør sjelden noe. Store animerte bakgrunner som tegnes om for hvert bilde, kan koste batteri og jevnhet, så foretrekk transform eller opacity og mål med DevTools.

### Hvordan respekterer jeg redusert bevegelse for gradientanimasjoner?

Pakk en `animation: none`-regel inn i `@media (prefers-reduced-motion: reduce)`, så brukere som ber om mindre bevegelse, ser et stillbilde.