CSS-animoidut liukuvärit: taustat tehtynä oikein

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.

Suunnittelupuolelta, milloin liike auttaa brändiä ja miten sitä rytmitetään, katso animoidut liukuväritaustat. 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.

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

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 @propertyllä 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, jos tuet vanhempia.

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

Tämäkin tekniikka piirtää uudelleen joka ruudulla, kuten ensimmäinen. Sen etu on hallinta: voit liikuttaa yhtä hehkua mesh-liukuvärissä, pyörittää kartiomaista reunaa 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.

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

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.

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

Tekniikan valinta

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 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 -opas selittää, mikä lasketaan poistamisen arvoiseksi liikkeeksi.

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