CSS 过渡生成器

设置过渡属性、时长、缓动函数与延迟,工具会生成对应的 transition 简写 CSS 代码,可直接粘贴到样式表中。全部在浏览器本地完成。

过渡设置 等待输入

生成的 transition 简写可用于 hover、focus 等状态切换动画。

计算结果
属性—
时长(s)—
设置参数后点击生成,CSS 代码将显示在这里。

生成的代码可直接粘贴使用;结果仅供参考。

计算说明
  • transition 简写顺序为:属性 时长 缓动 延迟。
  • 多个属性可用逗号分隔,分别指定过渡参数。
  • all 表示所有可过渡属性都参与过渡。
  • 时长与延迟单位为秒(s),需写数字。
  • 并非所有属性都可过渡,如 display 需配合其他方案。