animate

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Context: this sub-skill is one lens of the broader

ui-craft

skill. If the

ui-craft

skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Add or fix animations in the target the user described. Load the

ui-craft

skill.

Step 1 — Decision Ladder: run the Decision Ladder from

references/animation.md

first. Anything that fails it gets removed, not improved.

Step 2 — Pick the library:

If user opted into a stack during Discovery → read
```
references/stack.md
```
. Use the matching section (Motion, GSAP, or Three.js). Never mix libraries on the same property.
Otherwise → CSS transitions /
```
@keyframes
```
/
```
animation-timeline: view()
```
only.

Step 3 — Apply motion budget:

Element	Budget
Color/opacity	100-150ms
Small UI (tooltips, dropdowns)	150-200ms
Medium UI (modals, panels)	200-300ms
Large UI (page transitions, drawers)	300-400ms

Exit ≈ 75% of entrance duration (shorter, same

ease-out

— or a flatter tail like

cubic-bezier(0.4, 0, 1, 1)

for a softer exit). Never

ease-in

on UI (see

references/animation.md

cubic-bezier(0.22, 1, 0.36, 1)

is a safe spring-like default.

Step 4 — Multi-stage sequences → read

references/animation-orchestration.md

. Stagger 30-80ms, not 200ms.

Step 5 — Respect the knobs:

```
MOTION_INTENSITY ≤ 3
```
→ hover states only, no entrances, no scroll-triggered.
```
MOTION_INTENSITY 4-7
```
→ standard entrances + hover, one scroll reveal max per section.
```
MOTION_INTENSITY 8+
```
→ scroll-linked, page transitions, magnetic cursor OK (still honor reduced-motion).

Output: edit code directly. After each file, print the Review Format table. Flag any animation you removed and why.

上下文：此子技能是更广泛的

ui-craft

技能的一个分支。若同时安装了

ui-craft

技能，请先阅读其SKILL.md文档中的Discovery + Anti-Slop + Craft Test部分，再应用以下具体规则。

为用户描述的目标元素添加或修复动画。加载

ui-craft

技能。

步骤1 — 决策阶梯：先执行

references/animation.md

中的决策阶梯流程。任何不符合要求的动画都将被移除，而非改进。

步骤2 — 选择库:

若用户在Discovery阶段选择了技术栈 → 阅读
```
references/stack.md
```
文档。使用对应章节的库（Motion、GSAP或Three.js）。同一属性上绝不要混合使用不同库。
否则 → 仅使用CSS过渡 /
```
@keyframes
```
/
```
animation-timeline: view()
```
。

步骤3 — 应用动效时长预算:

元素	时长预算
颜色/透明度	100-150ms
小型UI（提示框、下拉菜单）	150-200ms
中型UI（模态框、面板）	200-300ms
大型UI（页面过渡、侧边栏）	300-400ms

退出动画时长约为入场动画的75%（更短，使用相同的

ease-out

— 或使用更平缓的曲线如

cubic-bezier(0.4, 0, 1, 1)

实现更柔和的退出效果）。UI动画绝不要使用

ease-in

（详见

references/animation.md

）。

cubic-bezier(0.22, 1, 0.36, 1)

是一个安全的类弹簧效果默认曲线。

步骤4 — 多阶段序列 → 阅读

references/animation-orchestration.md

文档。动画间隔设置为30-80ms，而非200ms。

步骤5 — 遵循强度参数:

```
MOTION_INTENSITY ≤ 3
```
→ 仅保留 hover 状态动画，不添加入场动画和滚动触发动画。
```
MOTION_INTENSITY 4-7
```
→ 标准入场动画 + hover 动画，每个区域最多添加一个滚动显示动画。
```
MOTION_INTENSITY 8+
```
→ 支持滚动联动、页面过渡、磁吸光标（仍需遵循减少动效的设置）。

输出: 直接编辑代码。修改每个文件后，打印Review Format表格。标记所有被移除的动画及其原因。