# CSS-animoidut liukuvärit: taustat tehtynä oikein

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

Liukuvärejä ei voi animoida suoraan, mutta kaiken niiden ympärillä voi. Neljä tekniikkaa, mitä kukin maksaa selaimelle ja miten liike pidetään rauhallisena ja valinnaisena.

## The short version

- Selaimet eivät osaa interpoloida kahden liukuväriarvon välillä, joten CSS-animoitu liukuväri liikuttaa, häivyttää tai muuntaa liukuväriä sen suoran animoinnin sijaan.
- Klassinen tekniikka tekee taustasta elementtiä suuremman ja animoi background-positionia, mikä toimii kaikkialla mutta piirtää uudelleen joka ruudulla.
- Mukautettujen ominaisuuksien rekisteröinti @propertyllä antaa selaimen animoida yksittäisiä värejä, kulmia ja paikkoja liukuvärin sisällä.
- Transformin tai opacityn animointi erillisellä liukuvärikerroksella on yleensä halvin vaihtoehto, koska selaimet voivat usein yhdistää sen piirtämättä uudelleen.
- Jokaisen liukuvärianimaation pitäisi pysähtyä tai muuttua lähes liikkumattomaksi, kun käyttäjä on pyytänyt vähennettyä liikettä.

**CSS-animoitu liukuväri** on liukuvärillinen tausta, joka muuttaa väriään tai paikkaansa ajan myötä. Siinä on koukku: jos kirjoitat kaksi eri liukuväriä `@keyframes`-sääntöön, selaimet eivät häivytä niiden välillä, vaan hyppäävät. Siksi jokainen toimiva tekniikka animoi jotain liukuvärin vierestä: sen paikkaa, sen sisällä olevia mukautettuja ominaisuuksia tai kerrosta, jolle se on piirretty. Se, minkä valitset, ratkaisee, kuinka sujuvalta se näyttää ja kuinka paljon työtä selain tekee joka ruudulla.

- Ruutu 1: hämärä: `linear-gradient(120deg, #1e1b4b, #7c3aed 45%, #f472b6)`
- Ruutu 2: myöhemmin: `linear-gradient(160deg, #1e1b4b, #6d28d9 35%, #fb7185)`
- Ruutu 3: hehku: `linear-gradient(200deg, #1e1b4b, #4c1d95 30%, #fb923c)`

Kolme hetkeä yhdestä hitaasta animaatiosta. Suunta ja väri liikkuvat, mutta paletti pysyy yhtenä perheenä.

Suunnittelupuolelta, milloin liike auttaa brändiä ja miten sitä rytmitetään, katso [animoidut liukuväritaustat](https://gradiently.design/fi/guide/animated-gradient-background). Tämä opas on koodi.

## Tekniikka 1: liikuta ylisuurta taustaa

Tee liukuväristä kaksi tai neljä kertaa elementin kokoinen `background-size`-ominaisuudella ja animoi sitten `background-position`, jotta sen eri osa näkyy ajan myötä. Se toimii jokaisessa selaimessa eikä tarvitse JavaScriptiä. Käytä arvoa `alternate`, jotta liike kääntyy sujuvasti eikä hyppää takaisin alkuun.

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

Klassinen animoitu liukuväri. Hitaat 12 - 30 sekunnin kestot tuntuvat tunnelmallisilta eivätkä vilkkailta.

Hinta: `background-position` ei ole jotain, mitä selaimet voivat liikuttaa pelkällä näytönohjaimella, joten elementti piirretään uudelleen joka ruudulla. Painikkeessa se on ei mitään. Koko näytön hero-osiossa se on todellista työtä, joka pyörii niin kauan kuin sivu on auki.

## Tekniikka 2: animoi värien pysäytyspisteitä @propertyllä

Mukautetut ominaisuudet ovat normaalisti merkkijonoja, joita ei voi interpoloida. Rekisteröinti `@property`llä antaa niille tyypin, kuten `<color>`, `<angle>` tai `<percentage>`, ja tyypitetyt ominaisuudet animoituvat sujuvasti. Käytä niitä liukuvärin sisällä, niin voit animoida värejä, kulmaa tai pysäytyspisteen paikkaa suoraan. `@property` on tuettu kaikissa nykyisissä suurissa selaimissa. Tarkista [caniuse](https://caniuse.com/mdn-css_at-rules_property), jos tuet vanhempia.

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

Värit ja kulma animoituvat liukuvärin sisällä. Rekisteröimättömät ominaisuudet hyppäisivät häivyttämisen sijaan.

- Alku: violetista pinkkiin: `linear-gradient(120deg, #7c3aed, #f472b6)`
- Loppu: syaanista oranssiin: `linear-gradient(200deg, #0891b2, #fb923c)`

Yllä olevan animaation kaksi päätä. Selain häivyttää jokaisen väliin jäävän ruudun.

Tämäkin tekniikka piirtää uudelleen joka ruudulla, kuten ensimmäinen. Sen etu on hallinta: voit liikuttaa yhtä hehkua [mesh-liukuvärissä](https://gradiently.design/fi/guide/css-mesh-gradient), pyörittää [kartiomaista reunaa](https://gradiently.design/fi/guide/css-gradient-border) tai siirtää brändin liukuväriä kohti toista palettia ilman ylisuuria taustoja.

## Tekniikka 3: muunna liukuvärikerrosta

Aseta liukuväri elementtiä paljon suuremmalle pseudoelementille ja animoi sen `transform`-ominaisuutta, esimerkiksi hidasta pyörimistä tai ajelehtimista. Selaimet voivat yleensä liikuttaa muunnettua kerrosta näytönohjaimella piirtämättä sitä uudelleen, joten tämä on halvin tapa animoida suurta liukuväriä. `will-change: transform` vihjaa, että kerros pitäisi ylentää etukäteen.

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

Valtava kartiomainen liukuväri pyörii hitaasti sisällön takana. Negatiivinen inset pitää kulmat peitettynä pyörimisen aikana.

## Tekniikka 4: häivytä kahden liukuvärin välillä

Aseta kaksi liukuvärikerrosta päällekkäin ja animoi ylemmän `opacity`-ominaisuutta. Opacity on myös yhdistäjäystävällinen ominaisuus, joten häivytys on sujuva ja halpa. Se sopii hitaisiin tunnelmanmuutoksiin, kuten päiväpaletin häipymiseen yöpaletiksi, ja antaa kahden liukuvärin olla rakenteeltaan täysin erilaisia.

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

Päivä häipyy yöksi ja takaisin. Vain opacity muuttuu, joten mitään ei piirretä uudelleen.

## Tekniikan valinta

| Tekniikka | Selaimen työ ruutua kohden | Sopii parhaiten |
| --- | --- | --- |
| `background-position`in liikuttaminen | Uudelleenpiirto | Pienet elementit, painikkeet, teksti |
| `@property`-värit ja -kulmat | Uudelleenpiirto | Tarkat värimuutokset, pyörivät reunat |
| `transform` kerroksella | Yleensä vain yhdistäminen | Suuret, koko näytön taustat |
| `opacity`-ristihäivytys | Yleensä vain yhdistäminen | Hitaat tunnelman tai paletin muutokset |

Uudelleenpiirrot ovat hyväksyttäviä pienillä alueilla. Suurilla alueilla suosi transformia ja opacityä.

Mittaa arvaamisen sijaan. Chromen DevToolsissa Rendering-paneelin paint flashing korostaa alueet, jotka piirretään uudelleen joka ruudulla, ja Performance-tallenne näyttää, kuinka suuri osa jokaisesta ruudusta menee piirtämiseen. [CSS-liukuvärien suorituskyky](https://gradiently.design/fi/guide/css-gradient-performance) käy sen läpi.

## Vähennetty liike ja hyvät tavat

Jotkut ihmiset huimaantuvat tai hajamielistyvät taustaliikkeestä, ja käyttöjärjestelmät antavat heidän pyytää sitä vähemmän. Kunnioita sitä `prefers-reduced-motion`-kyselyllä, joka pysäyttää animaation ja jättää paikalleen valmiin, liikkumattoman ruudun. [Vähennetty liike](https://gradiently.design/fi/guide/reduced-motion) -opas selittää, mikä lasketaan poistamisen arvoiseksi liikkeeksi.

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

Yksi sääntö, joka pysäyttää jokaisen yllä olevan tekniikan. Tarkista, että jäljelle jäävä ruutu näyttää yhä oikealta.

### Vältä

- Yli noin 8 sekunnin sykliä nopeammat kierrokset suurilla alueilla
- Sateenkaarisävyn pyöritys koko sivulla
- Liike leipätekstin takana, jota ihmisten pitää lukea
- Animaatiot, jotka jatkavat pyörimistä, kun välilehti on pitkään käyttämättä

### Tee näin

- Hidas, tunnelmallinen liike yhden väriperheen sisällä
- Liikettä herossa, tyyneyttä sisällössä
- Rauhallinen liikkumaton ruutu vähennettyä liikettä varten
- Testaa vaatimattomalla kannettavalla ja puhelimella, ei vain nopealla työpöydällä

## FAQ

### Voiko CSS-liukuvärin animoida?

Ei suoraan: selaimet hyppäävät kahden liukuväriarvon välillä avainkehyksissä. Animoi sen sijaan `background-position`ia, liukuvärin sisällä käytettyjä rekisteröityjä mukautettuja ominaisuuksia tai liukuvärikerroksen transformia ja opacityä.

### Mikä on sujuvin tapa animoida liukuväritausta?

Erillisen liukuvärikerroksen `transform`in tai `opacity`n animointi, koska selaimet pystyvät yleensä käsittelemään ne piirtämättä uudelleen.

### Miten animoin liukuvärin värit CSS:llä?

Rekisteröi jokainen väri `@property`llä määrityksellä `syntax: "<color>"`, käytä ominaisuuksia liukuvärissä ja muuta niitä `@keyframes`-säännössä.

### Hidastavatko animoidut liukuvärit sivua?

Pienillä ei juuri ole väliä. Suuret animoidut taustat, jotka piirtyvät uudelleen joka ruudulla, voivat maksaa akkua ja sujuvuutta, joten suosi transformia tai opacityä ja mittaa DevToolsilla.

### Miten kunnioitan vähennettyä liikettä liukuvärianimaatioissa?

Kääri `animation: none` -sääntö `@media (prefers-reduced-motion: reduce)` -lohkoon, jotta käyttäjät, jotka pyytävät vähemmän liikettä, näkevät liikkumattoman ruudun.