animation-master

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Chinese

Use this skill to apply the bundled Animation Master CSS effects to a website or app. The CSS files are stored in

assets/css/

and use reusable

.t-*

class names.

使用本技能可将打包好的Animation Master CSS动效应用到网站或应用中。CSS文件存储在

assets/css/

目录下，采用可复用的

.t-*

类名。

Copy CSS into the target project.

Use

scripts/install_motion_css.py --target <directory> <effect-name>

for selected effects.

Use

scripts/install_motion_css.py --target <directory> --all

only when the user wants the full library.

Wire the effect in markup.
- Add the corresponding
```
.t-*
```
  class to the element.
- Preserve the class names and keyframe names unless the user asks for a naming change.
- Keep existing
```
prefers-reduced-motion
```
  blocks.
Add state hooks when required.
- UI transition files commonly use state classes or attributes such as
```
.is-open
```
  ,
```
.is-closing
```
  ,
```
.is-previewing
```
  ,
```
.is-animating
```
  ,
```
data-state
```
  , or
```
data-page
```
  .
- Text effects use
```
.t-text-animation
```
  , the specific text class, and
```
.is-previewing
```
  .
Verify visually after integration.
- For local web work, run or reuse the local dev server and inspect the page in the browser.
- Check that the animation starts, stops, or replays according to the requested interaction.

```
assets/css/
```
: packaged CSS effects copied from the Animation Master site.
```
references/catalog.md
```
: effect categories, filenames, primary classes, and typical usage.
```
scripts/install_motion_css.py
```
: utility to list or copy CSS files into another project.

Element effects are usually continuous or one-shot transforms on a single element.
UI effects often need wrapper markup and a state toggle.
Text effects are split into individual files; do not re-aggregate them unless the user asks.
```
transitions-root.css
```
contains shared UI motion tokens and can be copied when a page uses several UI transition effects.