CSS 过渡动画生成器

功能

• 六种常用过渡属性：transform、opacity、背景色、阴影、模糊、all
• 时长 0–3000ms 可调，建议 150–400ms
• 六条缓动曲线，每条都标了性格与适用场景
• 延迟可调，用于做依次入场的错位效果
• 悬停预览区即可看到过渡过程，不需要点任何按钮
• 交付的代码里 `transition` 与 `:hover` 分两条规则写，分工清楚
• 下方给出可复制的完整 CSS，带 `.transition` 选择器
• 所有计算在浏览器本地完成

使用方法

1. 选一个过渡属性（一般从 transform 或 opacity 开始）
2. 调时长与缓动，把鼠标移到预览上看效果
3. 需要错位入场就加一点延迟
4. 满意后复制 CSS —— 注意 `transition` 在静止端、变化值在 `:hover` 端

常见问题

为什么 hover 有动画、移出时没有？

几乎肯定是把 `transition` 写进了 `:hover` 里。这样写的话，那条声明只在悬停时生效 —— 移出时它已经不在了，浏览器自然没有过渡可用，于是瞬间弹回。正确做法是把 `transition` 写在元素的基础规则上，`:hover` 里只写要变成什么。工具生成的代码就是这个结构，可以对照着看。

`transition: all` 有什么问题？

两个。一是性能：`all` 会让浏览器盯着每一个可动画属性，包括那些你根本没打算动的（某些属性会触发重排或重绘），在复杂页面上会明显变慢。二是意外动画：某个属性被别处改了（比如响应式的宽度、主题切换的颜色）也会跟着过渡，出来的效果往往莫名其妙。所以优先明确列出属性，`all` 只在原型阶段图省事时用。

哪些属性做过渡是安全的（不掉帧）？

`transform` 与 `opacity` 是公认安全的两类 —— 它们可以完全在 GPU 合成层完成，不触发重排也不触发重绘。而 `width`、`height`、`top`、`left`、`margin` 这类会触发重排，`box-shadow`、`background-color` 会触发重绘，量大了都会掉帧。所以「位移与缩放」优先用 `transform: translate/scale` 而不是改 `left/width` —— 这也是本工具把 transform 放在第一个选项的原因。

时长该取多少？

150–400ms 是界面过渡的舒适区：快到不觉得在等，慢到能看清变化。小于 100ms 会被当成瞬间完成（看不出是过渡），超过 500ms 用户就会开始等它。另外两个经验：元素越大、移动距离越远，时长可以略长（大物体的移动本来就该慢一点）；而反复触发的交互（悬停、点击反馈）要取更短的一档，因为它们会被频繁看到。