@property (registered custom properties)

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

Chrome 85Edge 85Safari 16.4Firefox 128

Da a una custom property un tipo, un valor inicial y herencia, lo que la hace animable. Uso clásico: animar el ángulo de un gradiente o un contador numérico, algo que las custom properties normales no pueden interpolar.

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: Sin @property la propiedad no tiene tipo y la animación salta entre valores; el borde estático se sigue renderizando.

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

Prompt

Cuando animes un valor que vive en una custom property (ángulo de gradiente, tono, número), regístralo con `@property --name { syntax: "<angle>"; inherits: false; initial-value: 0deg }` para que el navegador pueda interpolarlo, y después anima o transiciona `--name` directamente. Nunca intentes transicionar una custom property sin registrar.