🎞️
CSS 过渡生成器
配置 transition 的属性、时长、缓动与延迟，悬停预览并一键复制。
本地处理 · 不上传
加载工具中…
相关：transition · 过渡 · 动画 · 缓动 · css
CSS 过渡生成器配置过渡的属性、时长、延迟与缓动曲线，实时预览悬停效果并输出 transition 代码。
使用步骤
- 选择要过渡的属性
- 设置时长、延迟与缓动
- 悬停预览效果
- 复制生成的 CSS
使用场景
- 为按钮与卡片添加悬停动效
- 让状态切换更平滑
- 调试过渡时长找到合适手感
- 统一站内的过渡规范
小贴士
- 尽量避免写 `transition: all`，它会监听所有属性变化，容易在意想不到的地方触发动画并带来性能开销，应明确列出需要过渡的属性。
- 界面过渡的舒适区间是 150 到 300 毫秒。低于 100 毫秒感觉不到，超过 500 毫秒开始让人觉得拖沓。
- display 属性无法过渡，想做淡入淡出需要用 opacity 配合 visibility，或使用较新的 @starting-style 方案。
常见问题
为什么 display:none 到 block 没有动画？
display 是离散属性，不参与过渡。传统做法是改用 opacity 加 visibility 组合；现代方案可以用 `transition-behavior: allow-discrete` 配合 @starting-style。
transition: all 有什么问题？
它会监听元素所有可动画属性的变化，包括你没打算动的那些。除了意外的动画效果，浏览器还需要为此做额外的比对工作。明确指定属性更可控。
过渡多长时间合适？
多数界面交互在 150 到 300 毫秒。小元素可以更快，大面积的位移与展开可以稍长，但很少有理由超过 500 毫秒。
CSS 过渡生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用CSS 过渡生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。