12-principles-of-animation by raphaelsalaja/userinterface-wiki
npx skills add https://github.com/raphaelsalaja/userinterface-wiki --skill 12-principles-of-animation审查动画代码是否符合适用于网页界面的迪士尼动画十二原则。
文件:行号 格式输出检查结果| 优先级 | 类别 | 前缀 |
|---|---|---|
| 1 | 时序 | timing- |
| 2 | 缓动 | easing- |
| 3 | 物理 | physics- |
| 4 |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
| 舞台呈现 |
staging- |
timing-under-300ms用户触发的动画必须在 300 毫秒内完成。
失败示例：
.button { transition: transform 400ms; }
通过示例：
.button { transition: transform 200ms; }
timing-consistent相似元素必须使用相同的时序值。
失败示例：
.button-primary { transition: 200ms; }
.button-secondary { transition: 150ms; }
通过示例：
.button-primary { transition: 200ms; }
.button-secondary { transition: 200ms; }
timing-no-entrance-context-menu上下文菜单在进入时不应有动画（仅在退出时）。
失败示例：
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
通过示例：
<motion.div exit={{ opacity: 0 }} />
easing-entrance-ease-out进入动画必须使用 ease-out（快速到达，轻柔停止）。
失败示例：
.modal-enter { animation-timing-function: ease-in; }
通过示例：
.modal-enter { animation-timing-function: ease-out; }
easing-exit-ease-in退出动画必须使用 ease-in（在离开前积蓄动量）。
失败示例：
.modal-exit { animation-timing-function: ease-out; }
通过示例：
.modal-exit { animation-timing-function: ease-in; }
easing-no-linear-motion线性缓动应仅用于进度指示器，不应用于运动动画。
失败示例：
.card { transition: transform 200ms linear; }
通过示例：
.progress-bar { transition: width 100ms linear; }
easing-natural-decay对于自然衰减效果，应使用指数曲线，而非线性。
失败示例：
gain.gain.linearRampToValueAtTime(0, t + 0.05);
通过示例：
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
physics-active-state交互式元素必须具有包含缩放变换的激活/按下状态。
失败示例：
.button:hover { background: var(--gray-3); }
/* 缺少 :active 状态 */
通过示例：
.button:active { transform: scale(0.98); }
physics-subtle-deformation挤压/拉伸变形必须轻微（范围在 0.95-1.05 之间）。
失败示例：
<motion.div whileTap={{ scale: 0.8 }} />
通过示例：
<motion.div whileTap={{ scale: 0.98 }} />
physics-spring-for-overshoot当需要过冲并回弹的效果时，应使用弹簧动画（而非缓动）。
失败示例：
<motion.div transition={{ duration: 0.3, ease: "easeOut" }} />
// 当元素需要弹跳/回弹效果时
通过示例：
<motion.div transition={{ type: "spring", stiffness: 500, damping: 30 }} />
physics-no-excessive-stagger交错延迟每项不得超过 50 毫秒。
失败示例：
transition={{ staggerChildren: 0.15 }}
通过示例：
transition={{ staggerChildren: 0.03 }}
staging-one-focal-point一次应只有一个元素进行显著的动画。
失败示例：
// 多个元素同时具有引人注目的进入动画
<motion.div animate={{ scale: 1.1 }} />
<motion.div animate={{ scale: 1.1 }} />
staging-dim-background模态框/对话框的背景应调暗以引导焦点。
失败示例：
.overlay { background: transparent; }
通过示例：
.overlay { background: var(--black-a6); }
staging-z-index-hierarchy动画元素必须遵循 z-index 层级关系。
失败示例：
.tooltip { /* 没有 z-index，可能渲染在其他元素后面 */ }
通过示例：
.tooltip { z-index: 50; }
审查文件时，按以下格式输出结果：
文件:行号 - [规则ID] 问题描述
示例：
components/modal/index.tsx:45 - [timing-under-300ms] 退出动画 400ms 超过了 300ms 限制
components/button/styles.module.css:12 - [physics-active-state] 缺少 :active 变换
在检查结果后，输出一个汇总：
| 规则 | 数量 | 严重程度 |
|---|---|---|
timing-under-300ms | 2 | 高 |
physics-active-state | 3 | 中 |
easing-entrance-ease-out | 1 | 中 |
每周安装量
275
代码仓库
GitHub 星标数
633
首次出现
2026 年 1 月 26 日
安全审计
安装于
codex238
opencode237
gemini-cli223
github-copilot213
cursor198
claude-code183
Review animation code for compliance with Disney's 12 principles adapted for web interfaces.
file:line format| Priority | Category | Prefix |
|---|---|---|
| 1 | Timing | timing- |
| 2 | Easing | easing- |
| 3 | Physics | physics- |
| 4 | Staging | staging- |
timing-under-300msUser-initiated animations must complete within 300ms.
Fail:
.button { transition: transform 400ms; }
Pass:
.button { transition: transform 200ms; }
timing-consistentSimilar elements must use identical timing values.
Fail:
.button-primary { transition: 200ms; }
.button-secondary { transition: 150ms; }
Pass:
.button-primary { transition: 200ms; }
.button-secondary { transition: 200ms; }
timing-no-entrance-context-menuContext menus should not animate on entrance (exit only).
Fail:
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} />
Pass:
<motion.div exit={{ opacity: 0 }} />
easing-entrance-ease-outEntrances must use ease-out (arrive fast, settle gently).
Fail:
.modal-enter { animation-timing-function: ease-in; }
Pass:
.modal-enter { animation-timing-function: ease-out; }
easing-exit-ease-inExits must use ease-in (build momentum before departure).
Fail:
.modal-exit { animation-timing-function: ease-out; }
Pass:
.modal-exit { animation-timing-function: ease-in; }
easing-no-linear-motionLinear easing should only be used for progress indicators, not motion.
Fail:
.card { transition: transform 200ms linear; }
Pass:
.progress-bar { transition: width 100ms linear; }
easing-natural-decayUse exponential ramps, not linear, for natural decay.
Fail:
gain.gain.linearRampToValueAtTime(0, t + 0.05);
Pass:
gain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
physics-active-stateInteractive elements must have active/pressed state with scale transform.
Fail:
.button:hover { background: var(--gray-3); }
/* Missing :active state */
Pass:
.button:active { transform: scale(0.98); }
physics-subtle-deformationSquash/stretch deformation must be subtle (0.95-1.05 range).
Fail:
<motion.div whileTap={{ scale: 0.8 }} />
Pass:
<motion.div whileTap={{ scale: 0.98 }} />
physics-spring-for-overshootUse springs (not easing) when overshoot-and-settle is needed.
Fail:
<motion.div transition={{ duration: 0.3, ease: "easeOut" }} />
// When element should bounce/settle
Pass:
<motion.div transition={{ type: "spring", stiffness: 500, damping: 30 }} />
physics-no-excessive-staggerStagger delays must not exceed 50ms per item.
Fail:
transition={{ staggerChildren: 0.15 }}
Pass:
transition={{ staggerChildren: 0.03 }}
staging-one-focal-pointOnly one element should animate prominently at a time.
Fail:
// Multiple elements with competing entrance animations
<motion.div animate={{ scale: 1.1 }} />
<motion.div animate={{ scale: 1.1 }} />
staging-dim-backgroundModal/dialog backgrounds should dim to direct focus.
Fail:
.overlay { background: transparent; }
Pass:
.overlay { background: var(--black-a6); }
staging-z-index-hierarchyAnimated elements must respect z-index layering.
Fail:
.tooltip { /* No z-index, may render behind other elements */ }
Pass:
.tooltip { z-index: 50; }
When reviewing files, output findings as:
file:line - [rule-id] description of issue
Example:
components/modal/index.tsx:45 - [timing-under-300ms] Exit animation 400ms exceeds 300ms limit
components/button/styles.module.css:12 - [physics-active-state] Missing :active transform
After findings, output a summary:
| Rule | Count | Severity |
|---|---|---|
timing-under-300ms | 2 | HIGH |
physics-active-state | 3 | MEDIUM |
easing-entrance-ease-out | 1 | MEDIUM |
Weekly Installs
275
Repository
GitHub Stars
633
First Seen
Jan 26, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex238
opencode237
gemini-cli223
github-copilot213
cursor198
claude-code183
React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性
106,200 周安装