# animation-composition

Status: Baseline 2023 (Chrome 112, Safari 16, Firefox 115).  
Fonte: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-composition  
Página: https://designforai.dev/pt/css/animation-composition

Controla como várias animações na mesma propriedade se combinam: `add` ou `accumulate` em vez do padrão `replace`. Permite que uma animação de balanço rode por cima de uma rotação sem que uma sobrescreva a outra.

## HTML

```html
<div class="fx-020"></div>
```

## CSS

```css
.fx-020 {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: #ec4899;
  margin: 30px;
    animation: fx-020-spin 3s linear infinite,fx-020-bob 1s ease-in-out infinite alternate;
    animation-composition: replace,add
}
@keyframes fx-020-spin {
  to {
    transform: rotate(360deg)
  }
}
@keyframes fx-020-bob {
  to {
    transform: translateY(-20px)
  }
}
@media (prefers-reduced-motion: reduce) {
  .fx-020, .fx-020 * { animation: none; transition: none; }
}
```

Fallback: Sem ela, a última animação substitui a primeira (só o balanço roda). Degradação aceitável.

## Prompt

Ao empilhar vários keyframes em `transform` (ou outra propriedade única), defina `animation-composition: replace, add` (um valor por animação) para as animações posteriores somarem às anteriores em vez de sobrescrever. Alternativamente use as propriedades individuais `translate`/`rotate`/`scale`, cada uma com a própria animação.