transition必须写在常态选择器中，明确指定可动画属性（如transform、opacity），避免all；起始/结束态需有具体数值，不可用auto、none或不可动画属性。
transition 用对了才能平滑，不是加了就生效
很多同学给按钮加了 transition: all 0.3s，鼠标一悬停却没反应——根本原因是没触发可过渡的属性变化。CSS 动画平滑的前提是：起始态和结束态之间存在「可计算的数值型属性差」，比如 color、background-color、transform、opacity。像 display、height（从 0 到 auto）或 visibility 这类不可动画的属性，加了 transition 也白搭。
实操建议：
- 优先用
transform: scale()或transform: translateY()替代改margin/padding，性能更好且天然支持硬件加速 - 避免写
transition: all 0.3s，明确指定要动的属性，例如transition: background-color 0.2s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) - 确保悬停前后两个状态都定义了目标属性值，比如
button { background-color: #4a6fa5; } button:hover { background-color: #355681; }，缺一边就无法插值
hover 状态下用 transform 比 top/left 更稳
用 top 或 left 配合 position: relative 做位移动画，容易引发重排（reflow），尤其在复杂布局里卡顿明显；而 transform 只触发重绘（repaint），且能走 GPU 加速。
常见错误现象：button:hover { top: -2px; } 看似简单，但会破坏文档流、影响邻近元素，且动画不流畅。
立即学习“前端免费学习笔记（深入）”；
推荐写法示例：
button {
padding: 10px 24px;
border: none;
background: #5d8aa8;
color: white;
transition: background-color 0.2s, transform 0.25s;
}
button:hover {
background-color: #4a6fa5;
transform: translateY(-2px) scale(1.03);
}
别忽略 :focus 和键盘用户的体验
只写 :hover 会让键盘 Tab 导航时动画消失，不符合可访问性（a11y）要求。真实项目中必须同时覆盖 :focus，否则 WCAG 会报错。
使用场景：表单按钮、模态框操作项、管理后台工具栏等需要键盘操作的界面。
实操建议：
- 把
:hover和:focus的样式合并写，避免重复，例如button:hover, button:focus { ... } - 如果用了
outline: none，务必替换为可见的焦点样式（如box-shadow: 0 0 0 2px rgba(93, 138, 168, 0.5)），否则盲人用户完全不知道当前焦点在哪 - 不要用
:focus:not(:hover)单独控制——它在触屏设备上行为不稳定，iOS Safari 就可能不触发
动画曲线选错会让“平滑”变“抽搐”
CSS 默认的 ease 在某些按钮尺寸或颜色变化中反而显得突兀。比如深色背景切浅色文字，用线性 linear 会太生硬，而过强的缓入缓出（如 ease-in-out）又像弹簧一样弹两下。
参数差异：
-
cubic-bezier(0.25, 0.46, 0.45, 0.94)：MDN 推荐的“标准缓动”，比默认ease更柔和自然 -
ease-out：适合收尾强调（如按钮按下去的效果） - 慎用
steps()：它是逐帧动画，用于模拟打字、加载条等场景，不是“平滑”的选择
性能影响：自定义贝塞尔曲线不影响渲染性能，但过度复杂的值（如 6 位小数）没有实际意义，也难维护。
容易被忽略的地方是：不同浏览器对同一 cubic-bezier() 解析略有差异，尤其是旧版 Safari；线上环境建议用主流设计系统验证过的值，比如 Material Design 的 cubic-bezier(0.4, 0, 0.2, 1) 兼容性更稳。
