跳到技能内容
词映 AI导航
发现工具选型指南Skills 技能AI 快讯AI图片AI视频AI文档AI办公AI助手AI搜索AI编程AI音频AI设计AI智能体模型与开发AI学习模型评测AI提示词内容检测AI金融AI 3D扫描与识别其他工具跨境电商 AI
词映 AI导航
工具库Skills 技能
我的收藏
词映 AI导航
发现工具选型指南Skills 技能AI 快讯AI图片AI视频AI文档AI办公AI助手AI搜索AI编程AI音频AI设计AI智能体模型与开发AI学习模型评测AI提示词内容检测AI金融AI 3D扫描与识别其他工具跨境电商 AI
技能目录24 小时热门TOP100 技能每日更新
Skills 技能/Dragoon0x/optik/transition

Claude Code transition 技能:核对 CSS 过渡时间与缓动

English

Claude Code 安装步骤

  1. 打开 GitHub 固定提交的 `.claude/skills/transition/SKILL.md`,核对内容与使用条件。
  2. 在自己的项目中创建 `.claude/skills/transition/`,把核对后的文件保存为 `.claude/skills/transition/SKILL.md`。
  3. 在该项目根目录启动 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

工作步骤

  1. 按用途找出 CSS 过渡声明。
  2. 核对时长和缓动,并排除无状态变化的元素。
  3. 用前后示例说明调整。

验收方法

给出从 `transition: background-color 600ms ease` 到 `200ms` 悬停过渡的对照,为按钮挑选符合用途的 `cubic-bezier` 曲线,并移除 `section title` 的无用过渡。

GitHub 原文 · 更新日期 2026-11-14

适用环境

可在本地打开 CSS 的 Claude Code 项目。准备要核对的样式和交互用途。

常见问题

非交互标题需要跟按钮使用同样的过渡吗?

先看是否真的有状态变化。没有变化的元素可以移除过渡,按钮按交互类型选时长和缓动。

技能信息

GitHub 仓库
Dragoon0x/optik

收集于互联网

相关指南

  • Claude Code 自定义 Skills:SKILL.md 的目录、触发条件与测试
更多 Claude Code 技能

相关推荐

  • Claude Code a11y-audit:用键盘和语义检查网页可访问性

    Dragoon0x/optik

  • align 技能

    Dragoon0x/optik

  • benchmark 技能

    Dragoon0x/optik

  • certify 技能

    Dragoon0x/optik

  • color-fix 技能

    Dragoon0x/optik

  • contrast 技能

    Dragoon0x/optik

词映 AI 导航Skills 技能
工具分类全部工具已本地化技能选型指南AI 快讯