CSS @property: animera gradienter och anpassade egenskaper

CSS @property registrerar en anpassad egenskap med en typ, så att webbläsaren vet att --angle håller en vinkel eller att --tint håller en färg. När den väl känner till typen kan den interpolera mellan två värden, vilket betyder att du kan låta saker övergå och animeras som CSS annars vägrar röra: gradientfärger, gradientvinklar och positionen för ett färgstopp. Utan registrering är en anpassad egenskap bara en sträng, och en sträng kan bara hoppa från ett värde till nästa.

Varför gradienter inte övergår av sig själva

Prova transition: background 0.4s på en knapp vars hover-läge byter en linear-gradient() mot en annan, och ingenting mjukas av: den nya gradienten hoppar in. Gradienter är bilder, och specifikationen behandlar background-image som icke-interpolerbar, så webbläsaren har inget sätt att blanda en bild med en annan.

Den vanliga lösningen är att överdimensionera bakgrunden och glida background-position, vilket är hur de flesta animerade CSS-gradienter byggs. Det fungerar, men det flyttar bara en fast gradient. Du kan inte ändra en färg, rotera en vinkel eller skjuta ett stopp framåt. Registrerade egenskaper ändrar det, eftersom det som animeras inte längre är bilden utan ett typat tal eller en färg inuti den. Webbläsaren räknar om gradienten vid varje bildruta utifrån det aktuella värdet.

Syntaxen för @property

En @property-regel har tre deskriptorer. syntax anger vilken typ av värde som tillåts, inherits anger om barn får värdet, och initial-value används när inget annat sätter det. Alla tre krävs, förutom att initial-value får utelämnas när syntaxen är *. Om någon obligatorisk del saknas eller är fel ignorerar webbläsaren hela regeln, tyst.

@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ärdet måste vara beräkningsmässigt oberoende, vilket i praktiken betyder absoluta enheter: 0deg, 40%, 12px och hex-färger går bra, medan 2em eller var(--x) inte gör det. inherits: false är oftast vad du vill ha för animation, och det besparar webbläsaren att trycka ner värdet i trädet.

Animera en gradientfärg vid hover

Det här är det minsta användbara exemplet. Knappen använder --tint som sin andra färg, och hover-läget ändrar bara --tint. Eftersom egenskapen är registrerad som en färg mjukas övergången av mellan violett och korall i stället för att hoppa.

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

För fler sätt att behandla knappar, se gradientknapp CSS och CSS gradient hover-effekter.

Rotera en konisk gradientram

Ett populärt bruk av @property är en ram som verkar färdas runt ett kort. En konisk gradient startar från en vinkel, så att registrera vinkeln och animera den från 0deg till 360deg snurrar färgerna. Två bakgrunder gör jobbet: kortfärgen klippt mot utfyllnadsrutan och den koniska gradienten klippt mot ramrutan.

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

Flytta ett färgstopp

En registrerad procentenhet låter ett stopp glida. Använd den för en förloppsfyllning, en markering som sveper över en rubrik eller en horisont som stiger vid scroll. Här flyttar --stop punkten där gradienten går från bläck till blågrönt.

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

Registrera från JavaScript

CSS.registerProperty() gör samma jobb från ett skript. Det är praktiskt när ett designsystem registrerar sina egenskaper under körning, eller när ett värde först blir känt efter inläsning. Att registrera samma namn två gånger ger ett fel, så skydda anropet.

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

Webbläsarstöd, reservlösningar och prestanda

@property fungerar i aktuella Chrome, Edge, Safari och Firefox; Firefox lade till det sist, i version 128. Kolla caniuse om du stöder äldre enheter. En webbläsare som inte förstår regeln behandlar --angle som en vanlig anpassad egenskap, så din gradient ritas fortfarande med sitt startvärde och rör sig helt enkelt inte. Det är en bra reservlösning, förutsatt att den statiska bilden ser färdig ut.

1. 1

   Registrera före användning

   Lägg varje @property-regel på översta nivån, utanför mediafrågor, så att den gäller överallt.

2. 2

   Använd typade syntaxer

   Välj <color>, <angle> eller <percentage>. Undvik * för allt du tänker animera.

3. 3

   Låt egenskapen övergå

   Skriv transition: --tint 400ms, och nämn den anpassade egenskapen i stället för background.

4. 4

   Respektera reducerad rörelse

   Stoppa loopande animationer under prefers-reduced-motion: reduce, som beskrivs i prefers reduced motion.

5. 5

   Kontrollera stillbilden

   Stäng av animationen och se till att den vilande gradienten fortfarande ser avsiktlig ut.

Om rörelsen du vill ha hör hemma i sociala inlägg eller video snarare än på en webbsida bär en Gradiently-Mark redan sitt eget ljus och sin långsamma rörelse, och Pro exporterar den som MP4, WebM eller GIF där webbläsaren stöder inspelning, utan att du skriver keyframes. För allt på webben är @property det renaste verktyget du har. MDN-referensen listar varje deskriptor.