CSS @property: animer gradienter og brugerdefinerede egenskaber

CSS @property registrerer en brugerdefineret egenskab med en type, så browseren ved, at --angle rummer en vinkel, eller at --tint rummer en farve. Når den kender typen, kan den interpolere mellem to værdier, hvilket betyder, at du kan lave overgange og animere ting, som CSS normalt nægter at flytte: gradientfarver, gradientvinkler og placeringen af et farvestop. Uden registrering er en brugerdefineret egenskab bare en streng, og en streng kan kun hoppe fra den ene værdi til den næste.

Hvorfor gradienter ikke selv laver overgange

Prøv transition: background 0.4s på en knap, hvis hover-tilstand bytter én linear-gradient() ud med en anden, og intet glider: den nye gradient springer ind. Gradienter er billeder, og specifikationen behandler background-image som ikke-interpolerbar, så browseren har ingen måde at blande ét billede med et andet.

Den sædvanlige omvej er at gøre baggrunden for stor og lade background-position glide, hvilket er, hvordan de fleste animerede CSS-gradienter er bygget. Det virker, men det flytter kun en fast gradient rundt. Du kan ikke ændre en farve, dreje en vinkel eller skubbe et stop af sted. Registrerede egenskaber ændrer det, for det, der animeres, er ikke længere billedet, men et typet tal eller en farve inde i det. Browseren genberegner gradienten ved hvert billede ud fra den aktuelle værdi.

Syntaksen i @property

En @property-regel har tre descriptors. syntax siger, hvilken type værdi der er tilladt, inherits siger, om børn modtager værdien, og initial-value bruges, når intet andet sætter den. Alle tre er påkrævet, bortset fra at initial-value kan udelades, når syntaksen er *. Mangler en påkrævet del, eller er den forkert, ignorerer browseren hele reglen, uden at sige noget.

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

Startværdien skal være beregningsmæssigt uafhængig, hvilket i praksis betyder absolutte enheder: 0deg, 40%, 12px og hex-farver er fine, mens 2em eller var(--x) ikke er. At sætte inherits: false er som regel det, du vil til animation, og det sparer browseren for at skubbe værdien ned gennem træet.

Animer en gradientfarve ved hover

Det er det mindste nyttige eksempel. Knappen bruger --tint som sin anden farve, og hover-tilstanden ændrer kun --tint. Fordi egenskaben er registreret som en farve, glider overgangen mellem violet og koral i stedet for at springe.

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

For flere måder at behandle knapper på, se gradientknapper i CSS og CSS gradient hover-effekter.

Drej en konisk gradientkant

En yndet brug af @property er en kant, der ser ud til at rejse rundt om et kort. En konisk gradient starter fra en vinkel, så ved at registrere vinklen og animere den fra 0deg til 360deg drejer farverne rundt. To baggrunde gør arbejdet: kortets farve klippet til padding-boksen og den koniske gradient 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; }
}

Flyt et farvestop

En registreret procentværdi lader et stop glide. Brug den til en statusfyldning, et højdepunkt, der fejer hen over en overskrift, eller en horisont, der stiger ved scroll. Her flytter --stop det punkt, hvor gradienten skifter fra blæk til blågrøn.

@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() gør det samme job fra et script. Det er praktisk, når et designsystem registrerer sine egenskaber under kørsel, eller når en værdi først kendes efter indlæsning. At registrere samme navn to gange kaster en fejl, så beskyt det.

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

Browserunderstøttelse, nødløsninger og ydeevne

@property virker i nuværende Chrome, Edge, Safari og Firefox; Firefox var den sidste, der tilføjede den, i version 128. Tjek caniuse, hvis du understøtter ældre enheder. En browser, der ikke forstår reglen, behandler --angle som en almindelig brugerdefineret egenskab, så din gradient tegnes stadig med sin startværdi og bevæger sig bare ikke. Det er en fin nødløsning, så længe det stille billede ser færdigt ud.

1. 1

   Registrer, før du bruger

   Læg hver @property-regel på øverste niveau, uden for media queries, så den gælder overalt.

2. 2

   Brug typede syntakser

   Vælg <color>, <angle> eller <percentage>. Undgå * til alt, du har tænkt dig at animere.

3. 3

   Lav en overgang på egenskaben

   Skriv transition: --tint 400ms, så du nævner den brugerdefinerede egenskab frem for background.

4. 4

   Respekter reduceret bevægelse

   Stop animationer i loop under prefers-reduced-motion: reduce, som beskrevet i prefers reduced motion.

5. 5

   Tjek det stille billede

   Slå animationen fra og sørg for, at hvilegradienten stadig ser bevidst ud.

Hvis den bevægelse, du ønsker, hører hjemme på opslag på sociale medier eller video frem for en webside, bærer en Gradiently-Mark allerede sit eget lys og sin egen langsomme bevægelse, og Pro eksporterer den som MP4, WebM eller GIF, hvor browseren understøtter optagelse, uden at du skriver keyframes. Til alt på nettet er @property det reneste værktøj, du har. MDN-referencen lister hver descriptor.