Claude Code transition 技能:核对 CSS 过渡时间与缓动
EnglishClaude Code 安装步骤
- 打开 GitHub 固定提交的 `.claude/skills/transition/SKILL.md`,核对内容与使用条件。
- 在自己的项目中创建 `.claude/skills/transition/`,把核对后的文件保存为 `.claude/skills/transition/SKILL.md`。
- 在该项目根目录启动 Claude Code,在斜杠菜单中选择 `/transition`。
中文摘要
按悬停、状态变化和布局变化检查持续时间及缓动,给出调整前后的样式。
SKILL.md 中文导读
可复现示例
调用 /transition,使用这个虚构筛选按钮和静态标题片段检查过渡。
element `filter chip` | role hover
current `transition: background-color 600ms ease` | desired state=quick hover feedback
static `section title` has a color transition with no state change工作步骤
- 按用途找出 CSS 过渡声明。
- 核对时长和缓动,并排除无状态变化的元素。
- 用前后示例说明调整。
验收方法
给出从 `transition: background-color 600ms ease` 到 `200ms` 悬停过渡的对照,为按钮挑选符合用途的 `cubic-bezier` 曲线,并移除 `section title` 的无用过渡。
GitHub 原文 · 更新日期
适用环境
可在本地打开 CSS 的 Claude Code 项目。准备要核对的样式和交互用途。
常见问题
非交互标题需要跟按钮使用同样的过渡吗?
先看是否真的有状态变化。没有变化的元素可以移除过渡,按钮按交互类型选时长和缓动。