# CSS @property: Verläufe und Custom Properties animieren [Canonical HTML page](https://gradiently.design/de/guide/css-property-animation) Verläufe verweigern Übergänge, weil der Browser kein Bild in ein anderes überblenden kann. Gib einer Custom Property einen Typ, und diese Grenze verschwindet. Hier steht, wie @property funktioniert, mit Code zum Einfügen. ## The short version - CSS @property registriert eine Custom Property mit einer Syntax, einer Vererbungsregel und einem Startwert und sagt dem Browser so, welchen Werttyp sie hält. - Browser können einen Verlauf nicht direkt überführen, weil background-image nicht interpolierbar ist, aber sie können eine typisierte Custom Property im Verlauf animieren. - Typisierte Properties wie , , und animieren weich; eine Property mit der universellen Syntax * springt nur zwischen Werten. - Die Regel @property wird in aktuellen Versionen von Chrome, Edge, Safari und Firefox unterstützt, und Browser, die sie ignorieren, zeigen den Verlauf einfach ohne Bewegung. - Eine Custom Property in einem Hintergrund zu animieren zeichnet das Element in jedem Frame neu, also halte die animierte Fläche maßvoll und respektiere prefers-reduced-motion. **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](https://gradiently.design/de/guide/css-animated-gradient) 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. ### Nicht registriertes --tint - Als String aus Tokens gespeichert - Übergänge springen in der Mitte - Wird standardmäßig vererbt - Ein ungültiger Wert bricht die Deklaration zur Berechnungszeit ### Mit @property registriert - Als echte Farbe geparst - Übergänge interpolieren weich - Vererbung entscheidest du - Ein ungültiger Wert fällt auf den Startwert zurück ## 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. ```css @property --tint { syntax: ''; inherits: false; initial-value: #7c3aed; } @property --angle { syntax: ''; inherits: false; initial-value: 0deg; } @property --stop { syntax: ''; inherits: false; initial-value: 40%; } ``` Drei registrierte Properties: eine Farbe, ein Winkel und eine Stopp-Position. Registriere sie einmal, auf oberster Ebene eines Stylesheets. 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. | Syntax | Animiert weich | Gut für | | --- | --- | --- | | `` | Ja | Verlaufsfarben, Themenwechsel | | `` | Ja | Lineare Winkel, konische Drehung | | `` | Ja | Positionen von Farbstopps, Größen | | `` | Ja | Radiale Größen, Versätze | | `` | Ja | Werte wie Deckkraft, Multiplikatoren | | `` | Ja, in ganzen Schritten | Zähler, gestufte Effekte | | `*` | Nein, es springt | Alles, was du nie animierst | Die Syntaxen, die für Verlaufsarbeit zählen. Du kannst auch mehrere akzeptieren, etwa `' | '`, oder eine Liste mit `+`. ## 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. ```css @property --tint { syntax: ''; inherits: false; initial-value: #7c3aed; } .button { background: linear-gradient(120deg, #1e1b4b 0%, var(--tint) 100%); transition: --tint 400ms ease; } .button:hover { --tint: #fb7185; } ``` Die Transition nennt die Custom Property selbst. transition: background würde hier nichts bewirken. - In Ruhe: --tint ist Violett: `linear-gradient(120deg, #1e1b4b 0%, #7c3aed 100%)` - Mitten im Übergang: `linear-gradient(120deg, #1e1b4b 0%, #bb56b9 100%)` - Hover: --tint ist Koralle: `linear-gradient(120deg, #1e1b4b 0%, #fb7185 100%)` Drei Frames desselben Buttons. Die mittlere Farbe existiert nur, weil der Browser eine registrierte Farbe interpolieren kann. Weitere Möglichkeiten für Buttons zeigen [Verlaufsbuttons in CSS](https://gradiently.design/de/guide/css-gradient-button) und [CSS-Verläufe mit Hover-Effekt](https://gradiently.design/de/guide/css-hover-gradient). ## Einen konischen Verlaufsrahmen drehen Ein beliebter Einsatz von `@property` ist ein Rahmen, der scheinbar um eine Karte wandert. Ein [konischer Verlauf](https://gradiently.design/de/guide/css-conic-gradient) 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. ```css @property --angle { syntax: ''; 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; } } ``` Wiederhol die erste Farbe am Ende, damit die Naht verschwindet, wo 360deg auf 0deg trifft. Der konische Ring bei 0deg: `conic-gradient(from 0deg, #22d3ee, #7c3aed, #f472b6, #22d3ee)` Derselbe Verlauf, den der Rahmen nutzt. Wächst --angle, dreht sich dieser Ring, und der schmale Streifen um die Karte wandert mit. [Verlaufsrahmen in CSS](https://gradiently.design/de/guide/css-gradient-border) behandelt die statische Version. ## 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. ```css @property --stop { syntax: ''; 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%; } ``` Zwei Stopps an derselben Position ergeben eine harte Kante, und die Kante wandert, wenn sich --stop ändert. ## 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. ```js if ('registerProperty' in CSS) { try { CSS.registerProperty({ name: '--angle', syntax: '', inherits: false, initialValue: '0deg', }) } catch { // Already registered, which is fine. } } ``` Die JavaScript-Form nutzt initialValue in Camel Case. Alles andere entspricht der CSS-Regel. ## 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](https://caniuse.com/mdn-css_at-rules_property), 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. > **Achte auf das Neuzeichnen** Eine Property zu animieren, die in `background` genutzt wird, lässt den Browser das Element in jedem Frame neu zeichnen. Ein kleiner Rahmen oder Button ist günstig; ein bildschirmfüllender Hero in Endlosanimation kostet Akku. [Performance von CSS-Verläufen](https://gradiently.design/de/guide/css-gradient-performance) zeigt, welche Messwerte du im Blick behalten solltest. 1. **Vor der Nutzung registrieren** Setz jede `@property`-Regel auf oberste Ebene, außerhalb von Media Queries, damit sie überall gilt. 2. **Typisierte Syntaxen nutzen** Wähle ``, `` oder ``. Vermeide `*` für alles, was du animieren willst. 3. **Die Property animieren** Schreib `transition: --tint 400ms` und nenn die Custom Property statt `background`. 4. **Reduzierte Bewegung respektieren** Stopp Endlosanimationen unter `prefers-reduced-motion: reduce`, wie in [reduzierte Bewegung](https://gradiently.design/de/guide/reduced-motion) beschrieben. 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](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) listet jeden Deskriptor. ## FAQ ### Was macht CSS @property? Es registriert eine Custom Property mit einem Typ, einer Vererbungsregel und einem Startwert. Kennt der Browser den Typ, kann er den Wert prüfen und in Übergängen und Animationen interpolieren. ### Kann man einen CSS-Verlauf animieren? Nicht direkt, weil background-image nicht interpolierbar ist. Registriere Farben, Winkel oder Stopp-Positionen mit @property, nutze sie im Verlauf und animiere stattdessen diese Properties. ### Warum funktioniert meine @property-Animation nicht? Meist fehlt ein Deskriptor, der Startwert nutzt eine relative Einheit, die Syntax ist `*`, oder die Transition nennt `background` statt der Custom Property. Jeder ungültige Deskriptor lässt den Browser die ganze Regel ignorieren. ### Unterstützt Firefox @property? Ja. Firefox hat @property mit Version 128 eingeführt, damit funktioniert es jetzt in jedem großen aktuellen Browser. ### Sollte inherits true oder false sein? Nutze false für die meisten animierten Werte. So bleibt der Wert an dem Element, an dem du ihn setzt, und dem Browser bleibt Arbeit erspart.