# animationHost
> Emits the host `animation-*` declarations alone, taking every AnimationConfig key but `keyframes`.
```ts
import { animationHost } from "@sdxc/u/animation";
```
Emits the host `animation-*` declarations alone, taking every
AnimationConfig key but `keyframes`. Pair it with a sibling
`u.keyframes` call, since `@keyframes` only hoists from a mixin's top level.
## Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
| --- | --- |
| `` | `css({ "@keyframes ui-spin-rotate": { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } }, "&[data-busy]": { animationName: "ui-spin-rotate", animationDuration: "1s", animationIterationCount: "infinite" }, })` |
## Examples
### Basic example
Use `animationHost(name, config)` to run a `@keyframes` rule declared elsewhere, like one from `keyframes()`:
```tsx
spin
```
### Running in a state
Wrap it in a state like `hover()` to run the animation only while that state holds. Hover the tile to try it:
```tsx
hover me
```
### Sharing keyframes
Declare the keyframes once and point several `animationHost()` calls at them, each with its own timing:
```tsx
{["3s", "1.5s", "750ms"].map((duration) => (
{duration}
))}
```
## Applying on a state
Wrap the call in a state utility to scope it to one selector.
```ts
u.hover()
```
## Responsive design
Wrap the call in a container query to scope it to one width.
```ts
u.at("md", )
```
## Signature
```ts
u.animationHost(name: string, config: Omit)
```