选错 transition-timing-function 会导致动画缺乏起伏；应按属性特性分设曲线：位移用 cubic-bezier(0.22, 0.61, 0.36, 1)，缩放/旋转用 0.17, 0.67, 0.83, 0.67；避免 all 覆盖，需分层声明 transition-property；transform 与 opacity 组合须触发 GPU 加速；z-index 不支持过渡，宜用 transform 模拟浮起效果。
transition-timing-function 选错导致动画“平”得没起伏
默认的 cubic-bezier(0.25, 0.1, 0.25, 1)（也就是 ease）在多数场景下其实太平了——起始加速不够猛，结尾收束也不够缓。真正有层次的过渡，靠的是人为控制加速度曲线的「拐点」。
-
ease-in-out适合整体位移类动画（比如模态框淡入+滑入），但中间段速度偏匀速，层次感弱 -
cubic-bezier(0.34, 1.56, 0.64, 1)这类「超调」曲线能让元素先略过目标再回弹，制造轻盈感；但用在颜色或 opacity 上会显得突兀 - 真正稳又带层次的组合是：位移用
cubic-bezier(0.22, 0.61, 0.36, 1)（类似ease-out的变体），缩放/旋转补上0.17, 0.67, 0.83, 0.67这类带轻微回弹的曲线
别一股脑给所有属性套同一个 timing function。位移、缩放、透明度对节奏敏感度不同，混用才出立体感。
多个 transition 属性写在一起容易覆盖失效
很多人写成：transition: all 0.3s ease;，看着省事，实际埋雷：
-
all会把box-shadow、transform、opacity全塞进同一条时间线，但它们物理意义不同，该快的（如 hover 时的边框粗细变化）不该被拖慢 - 更糟的是，后续单独加的
transition-property: transform;可能被前面的all覆盖，尤其在 CSS 优先级混乱时
正确做法是分层声明：
立即学习“前端免费学习笔记（深入）”；
button {
transition-property: background-color, border-color;
transition-duration: 0.2s;
transition-timing-function: ease-in;
}
button:hover {
transform: translateY(-2px);
transition-property: transform;
transition-duration: 0.25s;
transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
}transform + opacity 组合动画必须开启 will-change 或 GPU 加速
只写 transition: transform 0.3s, opacity 0.3s; 不够。浏览器默认在主线程做 opacity 插值，而 transform 若未触发合成层，也会掉帧。
- 没开硬件加速时，快速 hover 多次可能卡顿，动画看起来“粘滞”，毫无层次可言
-
will-change: transform, opacity;是提示，不是银弹；滥用会导致内存占用升高，尤其在列表项上批量加 - 更稳妥的是用
transform: translateZ(0)或transform: translate3d(0, 0, 0)强制升层，兼容性也好
注意：opacity 动画本身不触发合成，必须和 transform 绑定使用才能进合成层。单用 opacity 过渡，再怎么调 timing function 都显得“软塌塌”。
层级叠加时 z-index 和 transition 冲突导致“跳变”
常见现象：一个带 transition: transform 0.3s 的卡片，hover 时同时改 z-index，结果动画中途突然“跃”到最上层，破坏连贯性。
-
z-index本身不支持过渡，它是离散值，浏览器只能硬切 - 解决方案不是禁用 z-index，而是用
transform: scale(1.02)+box-shadow模拟“浮起”效果，视觉上更自然 - 如果真要动层级，确保
z-index变化发生在 transition 开始前（比如用:hover伪类里先设好 z-index，再触发动画）
层次感不是靠堆叠顺序硬撑出来的，是靠空间感（transform）、通透感（opacity）、节奏差（timing function 分配）一起咬合出来的。少一个，就平一块。
