精准选择过渡属性：别让”all”毁了你的动画性能
很多人写Transition第一反应就是transition: all 0.3s;，觉得这样省事——反正元素所有变化都能过渡。但我得告诉你，这是我见过最多的”坑”。去年我接手一个电商网站的优化，发现他们所有按钮都用了all属性，结果用户反馈”点加入购物车时页面会抖一下”，后来一查性能面板，CPU占用直接飙到80%。
为什么all这么坑？因为它会让浏览器监听元素的所有CSS属性变化，哪怕是你根本不需要过渡的属性（比如z-index、visibility）。就像你搬家时把所有东西都塞进一个箱子，结果找衣服时得把锅碗瓢盆全翻出来——浏览器也一样，多余的属性计算会导致重排重绘，尤其在手机上，分分钟变成”PPT动画”。
那该怎么选属性？你得先想清楚：这个元素到底哪里在变化？ 比如按钮hover时，可能是背景色变了、边框变了、或者轻微放大；下拉菜单展开，主要是高度或透明度变化。把这些变化的属性列出来，只过渡它们就够了。我整理了一个表格，你可以直接对着查：
| 常用可过渡属性 | 效果场景 | 性能影响 | 使用 |
|---|---|---|---|
| opacity | 淡入淡出、模态框 | 极低（GPU加速） | 优先使用，无副作用 |
| transform | 缩放、位移、旋转 | 低（GPU加速） | 替代width/height，避免重排 |
| background-color | 按钮hover、状态切换 | 中（可能触发重绘） | 单独过渡，避免和all混用 |
| width/height | 元素展开/收缩 | 高（频繁重排） | 尽量用transform: scale替代 |
你看，像opacity和transform这种属性，浏览器会交给GPU处理，几乎不影响性能；而width/height这类会改变元素布局的，就容易卡顿。我给那个电商网站改按钮时，把transition: all 0.3s;改成了transition: background-color 0.3s, transform 0.3s;，只过渡背景色和缩放，CPU占用直接降到15%，页面滚动也流畅了。
这里有个小技巧：你可以打开Chrome的”性能”面板（F12→性能），录制一段操作，看看动画过程中有没有”长任务”或”重排”警告——这是判断属性是否选对的最快方法。
时间曲线与触发逻辑：让动画节奏”懂人心”
选对了属性，动画还是可能”怪怪的”？那多半是时间曲线和触发方式没调好。我见过很多人把动画时间设为0.3s就不管了，但同样的0.3s，用不同的节奏，效果天差地别。
先说时间曲线——专业名叫”贝塞尔曲线”，听起来复杂，其实就是控制动画”速度变化”的曲线。默认的ease（慢进→快→慢出）虽然常用，但不是万能的。比如按钮hover，你希望它”快速响应，缓慢恢复”，让用户感觉”点了就有反应”，这时候用ease-out（快进慢出）就比默认ease好；反过来，下拉菜单展开时，用ease-in（慢进快出）会更自然，像”慢慢出来，然后稳定展开”。
我之前给一个教育网站做课程卡片，一开始用默认ease，用户总说”卡片动得拖泥带水”。后来改成cubic-bezier(0.25, 0.1, 0.25, 1)（快速进入，匀速退出），反馈立刻变成”这个动画好清爽”。你可以在MDN的贝塞尔曲线工具{:target=”_blank” rel=”nofollow”}里拖动控制点试试，直观感受不同曲线的节奏——记住，好的动画节奏应该”符合物理直觉”，就像现实中物体运动一样，有加速和减速。
再说说触发方式，这是最容易踩坑的地方。你有没有遇到过：鼠标快速划过导航菜单，子菜单”闪个不停”？这是因为动画还没结束又触发了新的动画，导致”动画叠加”。我去年做一个企业官网的导航时就遇到了这个问题，客户说”菜单像疯了一样抖”。后来我用了两个办法解决：一是给子菜单加transition-delay: 0.1s;，让动画延迟100毫秒触发，过滤掉用户的误操作；二是用CSS的pointer-events: none;在动画过程中暂时关闭鼠标事件，等动画结束再恢复。代码大概是这样的（用大白话讲就是）：子菜单没展开时pointer-events: none;，鼠标移上去后设置pointer-events: auto;，同时开始过渡，这样快速划过就不会触发多次动画了。
如果你用JavaScript控制动画，记得监听transitionend事件，避免重复触发。比如点击按钮显示弹窗，动画没结束就再次点击，可能导致弹窗位置错乱——这时候在动画过程中禁用按钮，等transitionend事件触发后再启用，就能避免这个问题。我自己的博客评论区就这么处理的，现在不管用户点多快，弹窗都稳稳当当的。
其实做好CSS Transition动画真的不难，关键是别贪省事用all属性，花两分钟调调贝塞尔曲线，再处理一下触发逻辑。你可以先从改一个按钮的hover效果开始试，按这三个技巧改完，对比一下前后效果，相信你会回来感谢我——对了，如果你试了之后发现动画还是有问题，或者有其他想优化的场景，欢迎在评论区告诉我，咱们一起看看怎么解决！
你知道吗？好多人写Transition时总爱用“all”这个属性，觉得省事，想着不管元素怎么变都能过渡。但我得跟你说，这其实是个隐形的“性能坑”。之前我帮朋友改他的个人博客，发现他所有按钮都写着“transition: all 0.3s”，结果页面滚动的时候，那些按钮就像卡住的动画片似的一顿一顿。后来我把“all”换成具体的属性，比如只过渡opacity和transform，你猜怎么着？页面一下子就丝滑了，朋友自己都说“原来不是电脑卡，是我代码写得有问题”。
其实选对过渡属性一点都不难，你就记住几个“优等生”：opacity（就是元素变透明那个）、transform（缩放、移动、旋转都靠它），还有background-color（颜色变化）。这些属性有个共同点——浏览器会交给GPU处理，就像专门的快递小哥负责这段路，效率高还不堵车。比如你想让卡片hover时变大一点，用“transform: scale(1.05)”比直接改width和height好太多，我之前做电商商品卡片时试过，用height过渡会明显卡顿，换成scale后，哪怕同时过渡三四个卡片，页面都稳稳的。
那哪些属性要尽量避开呢？width和height就得小心，你想啊，改这俩属性相当于让元素“挪位置”，浏览器得重新计算周围元素的布局，就像你在拥挤的车厢里换座位，肯定会影响别人。还有z-index这种控制层级的属性，过渡它根本看不出效果，纯属白费功夫。我一般 选1-3个真正需要变化的属性就够了，比如按钮hover时，最多过渡background-color（颜色）和transform（轻微缩放），再多就显得乱了。你试试把“transition: all 0.3s”换成“transition: background-color 0.3s, transform 0.3s”，保准能感觉到差别——动画不仅流畅，还不会拖慢整个页面的速度。
哪些CSS属性适合添加Transition过渡效果？
优先选择对性能影响小的属性，如opacity（淡入淡出）、transform（缩放/位移/旋转）、background-color（颜色变化）等，这些属性由GPU加速，不易卡顿。避免过渡width/height（易触发重排）、z-index（无视觉过渡效果）等属性。可参考文中表格，根据具体场景选择1-3个必要属性，而非用“all”覆盖所有属性。
如何调整Transition的动画节奏让效果更自然？
通过贝塞尔曲线（easing function）控制速度变化，默认的ease（慢进→快→慢出）适合多数场景。若需“快速响应”（如按钮hover），可用ease-out（快进慢出）；若需“缓慢展开”（如下拉菜单），可用ease-in（慢进快出）。推荐用MDN的贝塞尔曲线工具拖动控制点调试，直观感受不同节奏（访问链接需注意添加nofollow标签）。
动画卡顿怎么办？检查这3个地方准没错
首先检查是否用了“transition: all”，改用具体属性；其次看是否过渡了width/height，尝试用transform: scale替代；最后优化触发逻辑：给动画加0.1s延迟（transition-delay）过滤误操作，或用pointer-events: none在动画中暂时关闭鼠标事件。可通过Chrome性能面板（F12→性能）查看CPU占用，定位卡顿原因。
CSS Transition和Animation有什么区别？该怎么选？
Transition适合“简单状态变化”（如hover触发颜色/大小变化），只需定义开始和结束状态，浏览器自动补间；Animation适合“复杂序列动画”（如加载动画、多步骤运动），可定义关键帧（@keyframes）、重复次数、方向等。日常开发中，按钮/菜单过渡用Transition足够，轮播图/加载动画 用Animation。
如何用JavaScript监听Transition动画结束？
通过“transitionend”事件监听，语法类似：element.addEventListener(‘transitionend’, function() { … })。需注意若过渡多个属性，事件会触发多次，可通过event.propertyName判断具体结束的属性（如“transform”或“background-color”）。实际开发中常用它做后续操作，比如动画结束后隐藏元素、启用按钮等。
