CSS Transition 生成器

如何使用

1. 选择要过渡的属性：all、opacity、transform、background-color、color、width、height、border-radius、box-shadow，或自定义名称。
2. 设置时长（毫秒），0 到 10000。
3. 如需等待再开始，设置延迟（毫秒）。
4. 选择缓动：linear、ease、ease-in、ease-out、ease-in-out 关键字，或四个数的自定义 cubic-bezier。
5. 看曲线图：x1 与 x2 必须在 0 到 1 之间，y1 与 y2 可以超出以做出回弹。
6. 按播放演示在两种状态间切换方块，然后复制 CSS。

常见用途

• 按钮与卡片悬停：transform 或 background-color 上 150 到 300 ms 的过渡。
• 菜单与抽屉展开：入场用较长时长配 ease-out。
• 错峰显现：给每项加延迟，而不是拉长时长。
• 缓动实验：同一动作对比 ease-in 与自定义 cubic-bezier。
• 动效归档：把定好参数的一行 transition CSS 交给开发。

为何保证隐私

属性名、时间与缓动参数在本页面内拼成 CSS 字符串，演示动画只作用于本地元素。不上传任何数据，工具可离线使用。

常见问题

问：支持哪些缓动值？ 答：linear、ease、ease-in、ease-out、ease-in-out 五个关键字，以及四个数的自定义 cubic-bezier。曲线图按 CSS 规范定义的各关键字标准 cubic-bezier 等价形式绘制。

问：延迟是做什么的？ 答：属性变化后等待若干毫秒再开始过渡。输出始终显式写出延迟（包括 0ms），简写保持可读。

问：能过渡自定义属性吗？ 答：选 custom 后输入属性名，如 filter 或 grid-template-rows，也可用逗号分隔多个。工具只检查名称格式；属性能否过渡取决于浏览器，只有可插值属性才会平滑过渡。

问：为什么演示里有些变化是跳变的？ 答：播放按钮同时改变 transform、背景色、透明度、圆角与宽度。只选一个属性时只有它参与过渡，其余瞬间切换，这正说明属性选择的重要性。