CSS transition 过渡生成器
可视化生成 CSS transition 过渡：配置 property、duration、timing-function、delay
四大属性。内置 cubic-bezier 曲线编辑器（SVG 可拖拽控制点，支持 y 轴超出 [0,1]
实现回弹）与 steps() 阶跃函数。鼠标悬停实时预览过渡效果，一键复制 CSS 代码。
内置平滑、弹性、慢出、快入、阶跃、旋转、缩放、阴影 8 组预设。所有处理在浏览器本地完成。
鼠标悬停下方区域触发过渡
ease/* 起始态 */
.box {
transition: transform 0.4s;
}
/* 结束态（鼠标悬停触发） */
.box:hover {
transform: scale(1.2) rotate(8deg);
}常见问题
CSS transition 属性包含哪些子属性？
transition 是 4 个子属性简写，顺序为：
① transition-property：要过渡的 CSS 属性，如 transform、opacity、all
② transition-duration：过渡时长，如 0.3s
③ transition-timing-function：缓动函数，如 ease、linear、cubic-bezier()、steps()
④ transition-delay：延迟开始时间，如 0.1s
简写示例：transition: transform 0.3s ease 0s;
多属性过渡用逗号分隔：transition: transform 0.3s, opacity 0.2s;
transition 和 animation 有什么区别？
两者都产生过渡效果，但触发机制与控制粒度不同：
transition（被动）：仅在属性值变化时（如 :hover、:focus、class 切换）
播放一次过渡，无法定义中间关键帧，只能从起始值到结束值插值。适合简单的悬停反馈、状态切换。
animation（主动）：通过 @keyframes 定义多个关键帧，可循环播放
（infinite）、控制方向（alternate）、暂停（paused）、延迟填充（fill-mode）。适合加载动画、
入场效果、持续循环动效。
简单悬停用 transition，复杂动效用 animation，两者经常配合使用。
cubic-bezier 的四个参数代表什么？
cubic-bezier(x1, y1, x2, y2) 定义一条三次贝塞尔曲线，P0=(0,0) 与 P3=(1,1) 固定，
P1=(x1,y1) 与 P2=(x2,y2) 是两个可调控制点：
① x 轴表示时间进度（0 到 1），y 轴表示属性值进度（0 到 1）
② x1、x2 必须在 [0,1] 范围内（CSS 规范要求）
③ y1、y2 可以超出 [0,1]：y < 0 产生"回弹先反向"效果，y > 1 产生"超出后回弹"效果
④ 曲线斜率表示瞬时速度：陡峭=快，平缓=慢
常见预设的等价 cubic-bezier：
ease = cubic-bezier(0.25, 0.1, 0.25, 1)、
ease-in = cubic-bezier(0.42, 0, 1, 1)
本工具的曲线编辑器支持拖拽 P1/P2 实时调整，y 轴允许超出 [0,1] 实现回弹。
steps() 阶跃函数是什么？jump-start 和 jump-end 有什么区别？
steps(N, jump-term) 将过渡分成 N 个等长的阶跃跳变，而非平滑插值：
① steps(4, jump-end)（等价 step-end）：过渡分 4 步，每步在
结束时跳变。进度曲线为 0%→0%→25%→50%→75%→100% 的阶跃。
② steps(4, jump-start)（等价 step-start）：过渡分 4 步，每步在
开始时跳变。进度曲线为 0%→25%→50%→75%→100%→100% 的阶跃。
③ 还支持 jump-none（不分额外跳跃）与 jump-both（首尾都跳），
但较少使用。
steps() 适合制作"机械感"动画、像素风动效、加载进度条阶跃效果。本工具支持
1-20 步可调，jump-start/jump-end 自由切换。
transition-property: all 有什么风险？
transition-property: all 会对元素的所有可过渡属性应用过渡，虽然写法简洁但有两个风险：
① 性能风险：无意中触发了不想过渡的属性（如 padding、margin 变化），
可能导致意外重排，影响页面流畅度。
② 预期不符：某些属性变化（如 left/top 在拖拽时）被过渡后会产生滞后感，
影响交互响应。
最佳实践：显式声明需要过渡的属性，如
transition: transform 0.3s, opacity 0.2s;，避免使用 all。
本工具默认列出常用可过渡属性供选择。
哪些 CSS 属性可以过渡？哪些不能？
可过渡的属性必须是可插值的（数值、颜色、长度等可计算中间值的类型）：
可过渡：transform、opacity、color、background-color、border-color、
border-radius、box-shadow、text-shadow、width、height、margin、padding、top/left/right/bottom、
font-size、line-height、filter 等。
不可过渡：display（none↔block 无中间态）、position（static↔absolute
无中间态）、float、clear、font-family（离散值无法插值）。
注意：transform 与 opacity 是 GPU 加速的合成层属性，过渡性能
最好，优先选择。修改 width/height/top/left 会触发重排，性能较差。
如何实现回弹（overshoot）效果？
回弹效果通过 cubic-bezier 的 y 轴超出 [0,1] 实现：
① 超出后回弹（overshoot）：y2 > 1，元素先超过目标值再回弹。
如 cubic-bezier(0.34, 1.56, 0.64, 1) 产生弹性放大效果。
② 先反向再前进（anticipation）：y1 < 0，元素先轻微反向再加速前进。
如 cubic-bezier(0.68, -0.55, 0.27, 1.55) 同时具有反向预备与超出回弹。
本工具的"弹性回弹"与"缩放回弹"预设即利用此特性。在曲线编辑器中拖拽控制点
到 [0,1] 矩形外即可看到回弹效果。
注意：回弹效果仅对可超出值域的属性有效（如 transform: scale），对 opacity 等限制
在 [0,1] 的属性，超出部分会被截断。
数据会上传到服务器吗？
不会。本工具完全在浏览器内运行，所有属性配置、曲线编辑、过渡预览与 CSS 生成由 JavaScript 在你本地执行，不会发送到任何服务器。cubic-bezier 曲线通过 SVG 实时渲染， 全程零网络请求，可离线使用。