animate-css-skill

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

animate-css-skill

Catalogue stub — full package: msrbuilds/animate-css-skill

目录占位文件 — 完整包地址：msrbuilds/animate-css-skill

Decision tree

决策流程

Is the package already installed? Check: your agent's skills directory contains
```
animate-css-skill
```
with content beyond this stub.
- Yes → invoke
```
animate-css-skill
```
  and proceed
- No → go to step 2

Which agent are you on?

Claude Code →
```
npx skills add msrbuilds/animate-css-skill
```
— or send
```
! npx skills add …
```
as a chat message (add
```
-g
```
for global, omit for project-only)

Cursor →

npx skills add msrbuilds/animate-css-skill

Other →

npx skills add msrbuilds/animate-css-skill

or see GitHub README

该包是否已安装？ 检查：你的Agent技能目录中是否包含
```
animate-css-skill
```
，且内容超出此占位文件。
- 是 → 调用
```
animate-css-skill
```
  并继续操作
- 否 → 进入步骤2
你正在使用哪个Agent？
- Claude Code → 执行
```
npx skills add msrbuilds/animate-css-skill
```
  — 或发送
```
! npx skills add …
```
  作为聊天消息（添加
```
-g
```
  参数为全局安装，省略则为仅当前项目安装）
- Cursor → 执行
```
npx skills add msrbuilds/animate-css-skill
```
- 其他 → 执行
```
npx skills add msrbuilds/animate-css-skill
```
  或查看GitHub README

Install command

安装命令

bash

npx skills add msrbuilds/animate-css-skill

bash

npx skills add msrbuilds/animate-css-skill

Invoke after install

安装后调用方式

Skill name:
```
animate-css-skill
```
Trigger phrases: "Animate.css", "CSS animation library", "bounce animation", "fadeIn", "animate-css"

技能名称：
```
animate-css-skill
```
触发短语："Animate.css", "CSS animation library", "bounce animation", "fadeIn", "animate-css"

What it does

功能说明

Applies Animate.css v4.1.1 animations across HTML, React/JSX components, and WordPress PHP templates. Covers the full Animate.css class catalogue (attention seekers, bouncing, fading, flipping, rotating, sliding, zooming, specials) with correct CDN or npm setup. Adds scroll-triggered reveals using the Intersection Observer API, RTL-aware directional flipping for right-to-left layouts, and

prefers-reduced-motion

compliance to respect user accessibility preferences.

为HTML、React/JSX组件和WordPress PHP模板应用Animate.css v4.1.1动画效果。覆盖Animate.css的完整类库（注意力吸引类、弹跳类、淡入淡出类、翻转类、旋转类、滑动类、缩放类、特殊类），并配置正确的CDN或npm环境。通过Intersection Observer API添加滚动触发的显示效果，支持RTL（从右到左）布局的方向翻转，以及适配

prefers-reduced-motion

设置以尊重用户的无障碍偏好。

When NOT to use

不适用场景

Custom keyframe animations built from scratch (use
```
css-animation-skill
```
)
Interactive gesture-driven animations requiring JavaScript state (use
```
framer-motion-skills
```
)

从零构建自定义关键帧动画（请使用
```
css-animation-skill
```
）
需要JavaScript状态的交互式手势驱动动画（请使用
```
framer-motion-skills
```
）