# @property (registered custom properties)

Status: Baseline 2024 (Chrome 85, Safari 16.4, Firefox 128).  
Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/@property  
Página: https://designforai.dev/pt/css/property

Dá a uma custom property um tipo, valor inicial e herança, o que a torna animável. Uso clássico: animar o ângulo de um gradiente ou um contador numérico, que custom properties simples não conseguem interpolar.

## 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: Sem @property a propriedade fica sem tipo e a animação salta entre valores; a borda estática ainda renderiza.

## Prompt

Ao animar um valor que vive numa custom property (ângulo de gradiente, matiz, número), registre-o com `@property --name { syntax: "<angle>"; inherits: false; initial-value: 0deg }` para o navegador conseguir interpolar, e então anime ou transicione `--name` diretamente. Nunca tente transicionar uma custom property não registrada.