# XWUIAnimationTween

A single tween over transform and opacity, the port of Ant Motion's `TweenOne`.
You hand it a target state - `x`, `y`, `scale`, `rotate`, `opacity` - and it plays a Web
Animations API animation to, from, or straight onto that state.

## When to use

- One element, one deliberate motion, defined as a target rather than as keyframes.
- Looping or ping-pong motion (`repeat`, `yoyo`) such as an attention nudge.
- Motion you need to control imperatively: `paused` and `reverse` are config, not CSS class
  gymnastics.

For enter/leave around show/hide state use `XWUIAnimationAnimate`; this component is a timeline,
not a lifecycle wrapper.

## Configuration surface

`data.content` is the animated content (string as text, or an `HTMLElement`) and
`data.animation` the target vars, defaulting to `{ x: 100, opacity: 1 }`.

`config`:

- `type` - `to` (default), `from`, or `set` for an instant apply.
- `duration` (default `450`ms), `delay` (default `0`),
  `easing` (default `cubic-bezier(0.215, 0.61, 0.355, 1)`).
- `repeat` - extra iterations; `-1` loops forever.
- `yoyo` - alternate direction on each iteration.
- `paused`, `reverse` - playback control.
- `className`.

### Family behaviour

Every component in `power/animation` is CSS plus the Web Animations API - no
`rc-*` React packages and no animation library. Two consequences worth knowing
before you design with them:

- `prefers-reduced-motion: reduce` is honoured, not decorated: presets jump
  straight to their end state, banner autoplay never starts, per-character text
  motion is skipped, and scroll-linked motion freezes. The content is always
  fully readable.
- A `content` string is written with `textContent`, never as HTML. Pass an
  `HTMLElement` when you need markup, and build that element yourself so the
  escaping decision stays where the data is.

## Basic Usage

A target state rather than keyframes: the tween plays to `data.animation` over `duration`.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: A single transform-and-opacity tween to a target state.
```

## Showcase

The same tween under its own heading, mounted into a dedicated child host.

```example
file: examples/Showcase.ts
html: examples/Showcase.html
title: Showcase
description: The tween replayed in an isolated host.
```

```api
```