什么是 web-motion-design？
在构建 CSS 动画、JavaScript 过渡、React/Vue 运动或任何基于浏览器的动画作品时使用。 来源：dylantarre/animation-principles。
·web-motion-design
*
web-motion-design
✓dylantarre/animation-principlesGitHub: dylantarre/animation-principles来源: dylantarre/animation-principles
在构建 CSS 动画、JavaScript 过渡、React/Vue 运动或任何基于浏览器的动画作品时使用。
如何安装 web-motion-design
通过命令行快速安装 web-motion-design AI 技能到你的开发环境
- 打开终端: 打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等）
- 运行安装命令: 复制并运行以下命令：npx skills add https://github.com/dylantarre/animation-principles --skill web-motion-design
- 验证安装: 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
来源：dylantarre/animation-principles。
SKILL.md
查看原文Apply Disney's 12 animation principles to CSS, JavaScript, and frontend frameworks.
| Squash & Stretch | transform: scale() on interaction states | | Anticipation | Slight reverse movement before action | | Staging | Focus user attention with motion hierarchy | | Straight Ahead / Pose to Pose | JS frame-by-frame vs CSS keyframes | | Follow Through / Overlapping | Staggered child animations, elastic easing |
| Slow In / Slow Out | ease-in-out, cubic-bezier curves | | Arc | motion-path or bezier translate transforms | | Secondary Action | Shadows, glows responding to primary motion | | Timing | Duration: micro 100-200ms, standard 200-400ms | | Exaggeration | Scale beyond 1.0, overshoot animations | | Solid Drawing | Consistent transform-origin, 3D perspective |
可引用信息
为搜索与 AI 引用准备的稳定字段与命令。
- 安装命令
npx skills add https://github.com/dylantarre/animation-principles --skill web-motion-design- 分类
- *创意媒体
- 认证
- ✓
- 收录时间
- 2026-02-19
- 更新时间
- 2026-03-10
快速解答
如何安装 web-motion-design？
打开你的终端或命令行工具（如 Terminal、iTerm、Windows Terminal 等） 复制并运行以下命令：npx skills add https://github.com/dylantarre/animation-principles --skill web-motion-design 安装完成后，技能将自动配置到你的 AI 编程环境中，可以在 Claude Code、Cursor 或 OpenClaw 中使用
这个 Skill 的源码在哪？
https://github.com/dylantarre/animation-principles
详情
- 分类
- *创意媒体
- 来源
- skills.sh
- 收录时间
- 2026-02-19