# Gate Animate

> 动效优化 / Animation. Adds motion, transitions, and UI animations. Use when the user wants to add animation effects to their site.

- Skill: `lennney/gate-animate` (Agent Skill)
- Install (CLI): `npx skillmds@latest add lennney/gate-animate`
- Raw SKILL.md: https://api.skillmd.com/api/skills/lennney/gate-animate/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Productivity
- Author: lennney (https://skillmd.com/u/lennney)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/lennney/gate-animate

---


问："想在哪加动效？比如页面切换、滚动渐入、按钮反馈。"

实现后告诉用户：
"加了滚动渐入效果——用户往下翻的时候内容会平滑地出现，不会那么突兀。按钮加了悬停变色反馈——鼠标放上去会有轻微变化，用户知道这个可以点。"

优先 CSS 实现，不够用 Framer Motion。尊重 `prefers-reduced-motion`（有些用户不喜欢动效，系统设置里关了就不会显示）。