CSS @property: Verläufe und Custom Properties animieren

CSS @property registriert eine Custom Property mit einem Typ, sodass der Browser weiß, dass --angle einen Winkel oder --tint eine Farbe hält. Kennt er den Typ, kann er zwischen zwei Werten interpolieren, und du kannst Dinge animieren, die CSS normalerweise nicht bewegt: Verlaufsfarben, Verlaufswinkel und die Position eines Farbstopps. Ohne Registrierung ist eine Custom Property nur ein String, und ein String kann nur von einem Wert zum nächsten springen.

Warum Verläufe von selbst keine Übergänge machen

Probier transition: background 0.4s an einem Button, dessen Hover-Zustand einen linear-gradient() gegen einen anderen tauscht, und nichts wechselt weich: Der neue Verlauf springt herein. Verläufe sind Bilder, und die Spezifikation behandelt background-image als nicht interpolierbar, also kann der Browser kein Bild in ein anderes überblenden.

Der übliche Umweg ist, den Hintergrund zu vergrößern und background-position zu verschieben, so sind die meisten animierten CSS-Verläufe gebaut. Das funktioniert, verschiebt aber nur einen festen Verlauf. Du kannst keine Farbe ändern, keinen Winkel drehen und keinen Stopp verschieben. Registrierte Properties ändern das, weil nicht mehr das Bild animiert wird, sondern eine typisierte Zahl oder Farbe darin. Der Browser berechnet den Verlauf in jedem Frame aus dem aktuellen Wert neu.

Die Syntax von @property

Eine @property-Regel hat drei Deskriptoren. syntax sagt, welcher Werttyp erlaubt ist, inherits, ob Kinder den Wert erhalten, und initial-value wird genutzt, wenn nichts anderes ihn setzt. Alle drei sind Pflicht, nur initial-value darf bei der Syntax * fehlen. Fehlt ein Pflichtteil oder ist er falsch, ignoriert der Browser die ganze Regel, ohne Meldung.

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

Der Startwert muss berechnungsunabhängig sein, was in der Praxis absolute Einheiten bedeutet: 0deg, 40%, 12px und Hex-Farben sind in Ordnung, 2em oder var(--x) nicht. inherits: false ist für Animationen meist das, was du willst, und erspart dem Browser, den Wert durch den Baum zu reichen.

Eine Verlaufsfarbe beim Hover animieren

Das ist das kleinste nützliche Beispiel. Der Button nutzt --tint als zweite Farbe, und der Hover-Zustand ändert nur --tint. Weil die Property als Farbe registriert ist, wechselt der Übergang weich zwischen Violett und Koralle, statt zu springen.

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

Weitere Möglichkeiten für Buttons zeigen Verlaufsbuttons in CSS und CSS-Verläufe mit Hover-Effekt.

Einen konischen Verlaufsrahmen drehen

Ein beliebter Einsatz von @property ist ein Rahmen, der scheinbar um eine Karte wandert. Ein konischer Verlauf beginnt bei einem Winkel, also dreht das Registrieren und Animieren dieses Winkels von 0deg bis 360deg die Farben. Zwei Hintergründe erledigen die Arbeit: die Kartenfarbe, auf die Padding-Box zugeschnitten, und der konische Verlauf, auf die Border-Box zugeschnitten.

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

Einen Farbstopp verschieben

Ein registrierter Prozentwert lässt einen Stopp gleiten. Nutze ihn für eine Fortschrittsfüllung, eine Hervorhebung, die über eine Überschrift streicht, oder einen Horizont, der beim Scrollen steigt. Hier verschiebt --stop den Punkt, an dem der Verlauf von Tinte zu Petrol wechselt.

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

Aus JavaScript registrieren

CSS.registerProperty() erledigt dieselbe Aufgabe aus einem Skript. Das ist praktisch, wenn ein Designsystem seine Properties zur Laufzeit registriert oder ein Wert erst nach dem Laden bekannt ist. Denselben Namen zweimal zu registrieren wirft einen Fehler, also sichere es ab.

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

Browserunterstützung, Fallbacks und Performance

@property funktioniert in aktuellen Versionen von Chrome, Edge, Safari und Firefox; Firefox kam als Letzter dazu, mit Version 128. Prüf caniuse, wenn du ältere Geräte unterstützt. Ein Browser, der die Regel nicht versteht, behandelt --angle als gewöhnliche Custom Property, dein Verlauf wird also mit seinem Startwert gezeichnet und bewegt sich einfach nicht. Das ist ein guter Fallback, solange das Standbild fertig aussieht.

1. 1

   Vor der Nutzung registrieren

   Setz jede @property-Regel auf oberste Ebene, außerhalb von Media Queries, damit sie überall gilt.

2. 2

   Typisierte Syntaxen nutzen

   Wähle <color>, <angle> oder <percentage>. Vermeide * für alles, was du animieren willst.

3. 3

   Die Property animieren

   Schreib transition: --tint 400ms und nenn die Custom Property statt background.

4. 4

   Reduzierte Bewegung respektieren

   Stopp Endlosanimationen unter prefers-reduced-motion: reduce, wie in reduzierte Bewegung beschrieben.

5. 5

   Das Standbild prüfen

   Schalte die Animation ab und stell sicher, dass der ruhende Verlauf noch gewollt aussieht.

Lebt die gewünschte Bewegung in Social Posts oder Videos statt auf einer Webseite, bringt ein Gradiently Mark schon eigenes Licht und langsame Bewegung mit, und Pro exportiert ihn als MP4, WebM oder GIF, wo der Browser Aufnahmen unterstützt, ganz ohne Keyframes. Für alles im Web ist @property das sauberste Werkzeug, das du hast. Die MDN-Referenz listet jeden Deskriptor.