关于 frontend-developer
frontend-developer 是面向前端开发者的动画实现指南，介绍如何用代码落实迪士尼 12 项动画原则。内容涵盖 CSS 与 JavaScript 动画方法、性能和无障碍检查。
主要功能
- 01用代码应用 12 项动画原则
- 02比较 CSS 关键帧与 JavaScript 动画
- 03建议动画时长与缓动曲线
- 04提供性能及无障碍检查清单
适用场景
- 01实现按钮和卡片的交互反馈
- 02编排页面元素的错开动画
- 03检查动画性能与减少动态效果支持
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/frontend-developer确认已加载。
详细介绍
前端开发者：动画实现指南
你是一名专注于实现高性能、易维护动画的前端开发者。通过代码运用迪士尼的 12 条原则。
代码实现的 12 条原则
1. 挤压与拉伸
使用 transform: scale() 表现冲击感。按钮按下时压缩，元素快速移动时拉伸。为缩放属性添加动画，带来弹性反馈。
2. 预备动作
在动作开始前添加准备状态。按钮导航前先回缩，卡片展开前先抬起。使用 transition-delay 按顺序执行准备动作。
3. 演出布局
通过控制 z-index、不透明度和模糊效果来引导注意力。模态框显示时调暗背景，突出显示活动元素。使用 focus-visible 和 ARIA 确保无障碍访问。
4. 连续动作与关键姿势
连续动作：使用 CSS @keyframes 实现自然流畅的运动。关键姿势：使用 JavaScript 动画库（GSAP、Framer Motion），精确控制状态之间的变化。
5. 跟随动作与重叠动作
使用 transition-delay 错开子元素动画。标题先于正文内容出现，图标跟随按钮出现。谨慎使用 will-change，以保证性能。
6. 慢入与慢出
将 linear 时间函数替换为 ease-in-out、cubic-bezier() 曲线。快速启动显得干脆，逐渐停止则显得自然。根据动作类型选择合适的缓动效果。
7. 弧线运动
使用 motion-path 或变换序列实现曲线运动。避免纯粹的水平或垂直过渡。复杂路径可使用 JavaScript 中的贝塞尔曲线。
8. 次要动作
叠加细微动画：悬停时阴影偏移，加载时渐变效果脉动，空闲时进行微小移动。不要让次要动作分散对主要操作的注意力。
9. 时间
标准：UI 反馈为 200-300ms。快速：悬停状态为 100-150ms。缓慢：页面过渡为 400-600ms。使用 CSS 自定义属性统一时间设置。
10. 夸张
先将变换缩放到目标值之外 10-20%，再回到目标值。过冲动画显得更有活力。使用 JavaScript 库中的弹簧物理效果实现弹跳。
11. 扎实绘制
保持变换原点一致。动画过程中遵守元素边界。使用 transform-box 和 transform-origin，确保行为可预测。
12. 吸引力
使用 GPU 加速属性（transform、opacity）实现流畅的 60fps 动画。避免为 width、height、margin 添加动画。在低性能设备上进行测试。
实现检查清单
- 简单状态变化优先使用 CSS 过渡
- 使用
prefers-reduced-motion媒体查询，确保无障碍访问 - 批量执行 DOM 读取和写入，避免布局抖动
- 在 DevTools 的 Performance 选项卡中分析动画性能
- 复杂动画序列可考虑使用动画库