CSS @property: liukuvärien ja ominaisuuksien animointi

CSS @property rekisteröi mukautetun ominaisuuden tyypin. Selain tietää silloin, että --angle sisältää kulman tai --tint värin. Kun tyyppi on tiedossa, selain voi interpoloida kahden arvon välillä. Voit siis tehdä siirtymiä ja animaatioita asioille, joita CSS ei muuten liikuta: liukuvärin väreille, kulmille ja väripisteen paikalle. Ilman rekisteröintiä mukautettu ominaisuus on vain merkkijono, joka voi ainoastaan hypätä arvosta toiseen.

Miksi liukuvärit eivät itsessään tue siirtymiä

Kokeile asetusta transition: background 0.4s painikkeessa, jonka hover-tila vaihtaa yhden linear-gradient()-arvon toiseen. Mikään ei pehmene, vaan uusi liukuväri ilmestyy heti. Liukuvärit ovat kuvia, ja määrittely pitää background-image-ominaisuutta interpoloimattomana. Selain ei siis voi sekoittaa kuvaa toiseksi.

Tavallinen kiertotapa on suurentaa taustaa ja liu’uttaa sitä background-position-ominaisuudella. Useimmat animoidut CSS-liukuvärit tehdään näin. Se toimii, mutta liikuttaa vain muuttumatonta liukuväriä. Et voi vaihtaa väriä, kääntää kulmaa tai siirtää pistettä. Rekisteröidyt ominaisuudet muuttavat tämän: animoitava kohde on kuvan sijaan sen sisällä oleva tyypitetty luku tai väri. Selain laskee liukuvärin joka ruudulla uudelleen nykyisen arvon pohjalta.

@property-säännön syntaksi

@property-säännössä on kolme kuvaajaa. syntax kertoo sallitun arvotyypin, inherits sen, saavatko lapsielementit arvon, ja initial-value antaa arvon, kun mikään muu ei aseta sitä. Kaikki kolme tarvitaan, paitsi että initial-value voidaan jättää pois syntaksin ollessa *. Jos vaadittu osa puuttuu tai on väärä, selain sivuuttaa koko säännön ilmoittamatta siitä.

@property --tint {
  syntax: '<color>';
  inherits: false;
  initial-value: #7c3aed;
}

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

@property --stop {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 40%;
}

Alkuarvon täytyy olla laskennallisesti riippumaton eli käytännössä absoluuttisissa yksiköissä. 0deg, 40%, 12px ja heksavärit käyvät, mutta 2em tai var(--x) eivät. Animoinnissa haluat yleensä asetuksen inherits: false. Se säästää selaimelta arvon välittämisen elementtipuussa alaspäin.

Animoi liukuvärin väriä hover-tilassa

Tämä on pienin hyödyllinen esimerkki. Painike käyttää --tint-arvoa toisena värinään, ja hover-tila muuttaa vain sitä. Koska ominaisuus on rekisteröity väriksi, siirtymä violetista koralliin pehmenee äkillisen vaihdon sijaan.

@property --tint {
  syntax: '<color>';
  inherits: false;
  initial-value: #7c3aed;
}

.button {
  background: linear-gradient(120deg, #1e1b4b 0%, var(--tint) 100%);
  transition: --tint 400ms ease;
}

.button:hover {
  --tint: #fb7185;
}

Lisää painikkeiden toteutustapoja löytyy CSS-liukuväripainikkeista ja CSS-liukuvärien hover-efekteistä.

Pyöritä kartioliukuvärireunusta

Suosittu @property-käyttötapa on reunus, joka näyttää kiertävän kortin ympäri. Kartioliukuväri alkaa kulmasta, joten sen rekisteröinti ja animointi arvosta 0deg arvoon 360deg pyörittää värejä. Työn tekevät kaksi taustaa: kortin väri rajattuna täytelaatikkoon ja kartioliukuväri rajattuna reunuslaatikkoon.

@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.card {
  border: 2px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#0f0b1e, #0f0b1e) padding-box,
    conic-gradient(from var(--angle), #22d3ee, #7c3aed, #f472b6, #22d3ee) border-box;
  animation: spin 6s linear infinite;
}

@keyframes spin {
  to { --angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

Siirrä väripistettä

Rekisteröity prosenttiarvo antaa väripisteen liukua. Käytä sitä etenemispalkin täyttöön, otsikon yli pyyhkäisevään korostukseen tai vierityksessä nousevaan horisonttiin. Tässä --stop siirtää kohtaa, jossa liukuväri muuttuu musteensävystä petrooliksi.

@property --stop {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 20%;
}

.meter {
  background: linear-gradient(90deg, #0d9488 0%, #0d9488 var(--stop), #0f172a var(--stop));
  transition: --stop 600ms ease-out;
}

.meter[data-done] {
  --stop: 100%;
}

Rekisteröinti JavaScriptistä

CSS.registerProperty() tekee saman työn skriptistä. Se on kätevä, kun designjärjestelmä rekisteröi ominaisuutensa ajon aikana tai arvo selviää vasta latauksen jälkeen. Saman nimen rekisteröinti kahdesti aiheuttaa virheen, joten suojaa se.

if ('registerProperty' in CSS) {
  try {
    CSS.registerProperty({
      name: '--angle',
      syntax: '<angle>',
      inherits: false,
      initialValue: '0deg',
    })
  } catch {
    // Already registered, which is fine.
  }
}

Selaintuki, vararatkaisut ja suorituskyky

@property toimii nykyisissä Chromessa, Edgessä, Safarissa ja Firefoxissa. Firefox lisäsi sen viimeisenä versiossa 128. Tarkista caniuse, jos tuet vanhoja laitteita. Sääntöä ymmärtämätön selain käsittelee --angle-arvoa tavallisena mukautettuna ominaisuutena. Liukuväri piirtyy edelleen alkuarvollaan, muttei liiku. Se on hyvä vararatkaisu, kunhan paikallaan oleva ruutu näyttää valmiilta.

1. 1

   Rekisteröi ennen käyttöä

   Aseta jokainen @property-sääntö ylimmälle tasolle mediakyselyjen ulkopuolelle, niin se pätee kaikkialla.

2. 2

   Käytä tyypitettyjä syntakseja

   Valitse <color>, <angle> tai <percentage>. Vältä *-syntaksia kaikessa, mitä aiot animoida.

3. 3

   Tee siirtymä ominaisuudelle

   Kirjoita transition: --tint 400ms ja nimeä mukautettu ominaisuus background-ominaisuuden sijaan.

4. 4

   Kunnioita vähennettyä liikettä

   Pysäytä toistuvat animaatiot asetuksella prefers-reduced-motion: reduce, kuten vähennetyn liikkeen oppaassa kuvataan.

5. 5

   Tarkista liikkumaton ruutu

   Poista animaatio käytöstä ja varmista, että lepotilan liukuväri näyttää edelleen harkitulta.

Jos haluat liikettä somejulkaisuihin tai videoon verkkosivun sijaan, Gradientlyn Mark sisältää jo oman valonsa ja hitaan liikkeensä. Prolla viet sen MP4-, WebM- tai GIF-muodossa selaimen tukiessa tallennusta, ilman avainruutujen kirjoittamista. Verkossa @property on selkein käytettävissäsi oleva työkalu. MDN:n dokumentaatio luettelee kaikki kuvaajat.