🎞️ CSS 过渡效果生成器CSS Transition Generator

使用说明与常见问题How-to & FAQ

「CSS 过渡效果生成器」是什么？What is the CSS Transition Generator tool?

可视化生成 CSS transition 过渡代码：选择要过渡的属性、时长、缓动曲线和延迟，鼠标移到预览方块上即可看到效果，一键复制代码。Build CSS transition code visually: choose the property, duration, easing curve and delay, hover the preview box to see the effect, and copy the code.

如何使用「CSS 过渡效果生成器」？How do I use the CSS Transition Generator?

在下方选择过渡属性（如 transform、背景色）、时长、缓动函数和延迟，把鼠标移到预览方块上（手机上点一下）查看动画效果，满意后复制生成的 CSS。Choose the property (e.g. transform or background colour), duration, easing and delay, then hover the preview box (tap on mobile) to watch it, and copy the generated CSS.

transition 和 animation 有什么区别？How is transition different from animation?

transition 只在属性值发生变化时（例如 :hover、切换 class）从旧值过渡到新值，只有起点和终点；animation 用 @keyframes 定义，可以自动播放、循环并设置多个关键帧。A transition runs only when a property value changes (e.g. on :hover or a class change) and has just a start and end; an animation uses @keyframes, can autoplay, loop and have many keyframes.

哪些属性适合做过渡动画？Which properties animate smoothly?

transform 和 opacity 由 GPU 合成，性能最好；width、height、top、left 等会触发重新布局，在低端手机上可能掉帧。display 不能过渡。transform and opacity are GPU-composited and perform best; width, height, top and left trigger layout and may stutter on low-end phones. display cannot be transitioned.

「CSS 过渡效果生成器」免费吗？数据会上传吗？Is the CSS Transition Generator free? Is my data uploaded?

「CSS 过渡效果生成器」完全免费，无需注册或安装，手机和电脑都能用；所有处理都在你的浏览器本地完成，输入的内容和文件不会上传到服务器。The CSS Transition Generator is completely free with no sign-up or install and works on phones and desktops; everything runs locally in your browser and nothing you enter is uploaded.