@property (registered custom properties)

Baseline 2024 (Chrome 85, Safari 16.4, Firefox 128).

Chrome 85Edge 85Safari 16.4Firefox 128

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.

Animated conic border

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

HTML

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

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

Quelle: developer.mozilla.org/en-US/docs/Web/CSS/@property

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.