⏱️ CSS过渡生成器

关于CSS过渡生成器

transition CSS属性让你定义属性变化的时间。浏览器不再从一个值瞬间跳到另一个值，而是在你控制的持续时间内平滑插值。本生成器让你选择属性、持续时间、缓动曲线和延迟，然后即时复制结果。

可控属性

• 属性 —— 要动画的CSS属性（或 all 表示所有可动画属性）。
• 持续时间 —— 过渡持续的时间，以秒为单位。
• 缓动函数 —— 缓动曲线：ease、linear、ease-in、ease-out、ease-in-out 或阶跃函数。
• 延迟 —— 过渡开始前的等待时间，以秒为单位。

如何使用

1. 选择要动画的属性。
2. 用滑块设置持续时间。
3. 选择缓动函数作为缓动曲线。
4. 如需调整延迟。
5. 悬停预览框查看过渡效果。
6. 点击复制CSS并粘贴到样式表中。

常见问题

过渡和动画有什么区别？ 过渡在属性值变化时（如悬停时）平滑改变属性。@keyframes 动画会自动运行，定义关键帧并可循环。

可以过渡多个属性吗？ 可以。可以用逗号分隔多个过渡定义，例如 transition: color 0.3s ease, transform 0.5s ease-in。

为什么我的过渡不工作？ 请确保属性可动画（如 display 不能过渡），持续时间大于0，且属性值确实发生了变化。