CSS 过渡生成器
CSS 过渡生成器针对 hover、focus 等状态变化配置 transition：选择要过渡的属性、时长、延迟与 cubic-bezier 缓动，输出可粘贴的 transition 声明，帮按钮颜色、卡片位移与展开折叠获得平滑中间态。
永久免费本地计算 · 零上传
🔒 全程在浏览器内计算，输入内容不会离开您的设备。
怎么用
- 选择参与过渡的属性
- 设定 duration 与 delay
- 挑选缓动或自定义曲线
- 复制 transition 声明
典型场景
按钮变色加平滑过渡不生硬
卡片悬停位移配缓动更自然
折叠面板展开做高度过渡
常见问题
能指定单属性吗？
可只过渡 transform 或 color，避免 all 带来的性能浪费。
cubic-bezier 怎么写？
提供常用曲线预设，也可输入自定义四点参数。
和关键帧动画区别？
transition 描述状态间的一次过渡，keyframes 编排多帧序列。