CSS @property: animer gradienter og egendefinerte egenskaper

CSS @property registrerer en egendefinert egenskap med en type, så nettleseren vet at --angle inneholder en vinkel eller at --tint inneholder en farge. Når den kjenner typen, kan den interpolere mellom to verdier, og da kan du animere ting CSS vanligvis nekter å flytte: gradientfarger, gradientvinkler og posisjonen til et fargestopp. Uten registrering er en egendefinert egenskap bare en tekststreng, og en streng kan bare hoppe fra én verdi til den neste.

Hvorfor gradienter ikke animeres av seg selv

Prøv transition: background 0.4s på en knapp der hover-tilstanden bytter én linear-gradient() mot en annen, og ingenting glir: den nye gradienten hopper inn. Gradienter er bilder, og spesifikasjonen behandler background-image som ikke interpolerbar, så nettleseren har ingen måte å blande ett bilde over i et annet.

Den vanlige omveien er å gjøre bakgrunnen overdimensjonert og skyve background-position, som er slik de fleste animerte CSS-gradienter bygges. Det virker, men det flytter bare en fast gradient rundt. Du kan ikke endre en farge, dreie en vinkel eller skyve et stopp. Registrerte egenskaper endrer det, fordi det som animeres ikke lenger er bildet, men et typet tall eller en farge inni det. Nettleseren regner ut gradienten på nytt i hver bilderute fra den gjeldende verdien.

Syntaksen for @property

En @property-regel har tre deskriptorer. syntax sier hvilken type verdi som er tillatt, inherits sier om barna får verdien, og initial-value brukes når ingenting annet setter den. Alle tre er påkrevd, bortsett fra at initial-value kan utelates når syntaksen er *. Mangler en påkrevd del eller er den feil, ignorerer nettleseren hele regelen, i stillhet.

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

Startverdien må være beregningsmessig uavhengig, som i praksis betyr absolutte enheter: 0deg, 40%, 12px og hex-farger er greit, mens 2em eller var(--x) ikke er det. inherits: false er som regel det du vil ha for animasjon, og det sparer nettleseren for å sende verdien nedover treet.

Animer en gradientfarge ved hover

Dette er det minste nyttige eksempelet. Knappen bruker --tint som andre farge, og hover-tilstanden endrer bare --tint. Fordi egenskapen er registrert som en farge, glir overgangen mellom fiolett og korall i stedet for å hoppe.

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

Flere måter å behandle knapper på finner du i gradientknapper i CSS og hover-effekter med CSS-gradient.

Roter en konisk gradientkant

En yndlingsbruk av @property er en kant som ser ut til å vandre rundt et kort. En konisk gradient starter fra en vinkel, så når du registrerer vinkelen og animerer den fra 0deg til 360deg, snurrer fargene. To bakgrunner gjør jobben: kortfargen klippet til padding-boksen og den koniske gradienten klippet til border-boksen.

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

Flytt et fargestopp

En registrert prosentverdi lar et stopp gli. Bruk den til en fremdriftsfylling, en utheving som sveiper over en overskrift, eller en horisont som stiger når du ruller. Her flytter --stop punktet der gradienten skifter fra blekk til blågrønn.

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

Registrering fra JavaScript

CSS.registerProperty() gjør samme jobb fra et skript. Det er praktisk når et designsystem registrerer egenskapene sine under kjøring, eller når en verdi først blir kjent etter lasting. Å registrere samme navn to ganger kaster en feil, så beskytt kallet.

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

Nettleserstøtte, reserveløsninger og ytelse

@property virker i dagens Chrome, Edge, Safari og Firefox; Firefox var sist ute og la det til i versjon 128. Sjekk caniuse hvis du støtter eldre enheter. En nettleser som ikke forstår regelen, behandler --angle som en vanlig egendefinert egenskap, så gradienten tegnes fortsatt med startverdien og står bare stille. Det er en fin reserveløsning, så lenge stillbildet ser ferdig ut.

1. 1

   Registrer før du bruker

   Legg hver @property-regel på toppnivået, utenfor mediespørringer, så den gjelder overalt.

2. 2

   Bruk typede syntakser

   Velg <color>, <angle> eller <percentage>. Unngå * for alt du har tenkt å animere.

3. 3

   Animer egenskapen

   Skriv transition: --tint 400ms og navngi den egendefinerte egenskapen i stedet for background.

4. 4

   Respekter redusert bevegelse

   Stopp animasjoner som går i loop under prefers-reduced-motion: reduce, som beskrevet i prefers reduced motion.

5. 5

   Sjekk stillbildet

   Slå av animasjonen og sørg for at gradienten i hvile fortsatt ser tilsiktet ut.

Hvis bevegelsen du ønsker, hører hjemme i innlegg i sosiale medier eller video og ikke på en nettside, har en Mark fra Gradiently allerede sitt eget lys og sin langsomme bevegelse, og Pro eksporterer den som MP4, WebM eller GIF der nettleseren støtter opptak, uten at du skriver keyframes. For alt på nettet er @property det ryddigste verktøyet du har. MDN-referansen lister opp alle deskriptorene.