# @property (registered custom properties)

Status: Baseline 2024 (Chrome 85, Safari 16.4, Firefox 128).  
Quelle: https://developer.mozilla.org/en-US/docs/Web/CSS/@property  
Seite: https://designforai.dev/de/css/property

Gibt einer Custom Property einen Typ, einen Initialwert und Vererbung, was sie animierbar macht. Klassischer Einsatz: einen Verlaufswinkel oder einen numerischen Zähler animieren, was einfache Custom Properties nicht interpolieren können.

## HTML

```html
<div class="fx-010">Animated conic border</div>
```

## CSS

```css
@property --fx-010-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.fx-010{
  padding:20px;border-radius:12px;font-family:system-ui;color:#fff;background:#111;
  border:3px solid transparent;
  background:linear-gradient(#111,#111) padding-box,conic-gradient(from var(--fx-010-angle),#2563eb,#ec4899,#2563eb) border-box;
  animation:fx-010-spin 3s linear infinite;
}
@keyframes fx-010-spin{to{--fx-010-angle:360deg}}
@media (prefers-reduced-motion: reduce) {
  .fx-010, .fx-010 * { animation: none; transition: none; }
}
```

Fallback: Ohne @property ist die Property untypisiert und die Animation springt zwischen Werten; der statische Rand wird trotzdem gerendert.

## Prompt

Wenn du einen Wert animierst, der in einer Custom Property lebt (Verlaufswinkel, Farbton, Zahl), registriere ihn mit `@property --name { syntax: "<angle>"; inherits: false; initial-value: 0deg }`, damit der Browser ihn interpolieren kann, und animiere oder transitioniere dann `--name` direkt. Versuche nie, eine nicht registrierte Custom Property zu transitionieren.