animation-master

Original：🇺🇸 English

Translated

1 scriptsChecked / no sensitive code detected

Reusable CSS motion library for Animation Master. Use when Codex needs to add, copy, adapt, or package local `.t-*` CSS animation effects for element motion, UI transitions, text motion, number rolling, badges, menus, modals, page transitions, hover states, or one-click CSS snippets.

3installs

Sourcekaneyoung1994/motion-skill

Added on2026-05-21

NPX Install

npx skill4agent add kaneyoung1994/motion-skill animation-master

SKILL.md Content

View Translation Comparison →

Animation Master

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.

Workflow

Choose the effect category and file.
- Read
```
references/catalog.md
```
  when selecting an effect or mapping a request to a CSS file.
- Prefer copying only the CSS file(s) needed for the requested effect.

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.

Resources

```
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.

Integration Notes

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.