transition必须写在卡片默认状态中，如.card{transition:transform 0.3s ease,box-shadow 0.3s ease;}，而非:hover里；优先用transform而非top/left实现滑动；box-shadow模糊值宜控制在4–12px，避免transparent；推荐0.2–0.35s时长与cubic-bezier(0.25,0.46,0.45,0.94)缓动。
transition 该写在哪个元素上
必须写在卡片本身（即要动的元素）的默认状态里，而不是 hover 或其他伪类中。否则第一次悬停时没有过渡效果，只在离开时触发。
常见错误是只写在 :hover 里，导致“闪入”不自然：
.card { /* ✅ 正确：过渡定义在常态 */ transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); }
如果卡片还带 position: absolute 或 top/left 位移，也要把 top 和 left 加进 transition 列表，否则这些属性变化不会过渡。
transform 比 top/left 更适合做滑动过渡
用 transform: translateY() 实现上下滑动，比直接改 top 性能高得多——它走的是合成层（compositor），不触发重排（reflow），动画更流畅，尤其在低端设备或复杂页面里明显。
立即学习“前端免费学习笔记（深入）”；
以下对比要注意：
-
transform: translateY(-4px)→ 推荐，GPU 加速，平滑 -
top: -4px→ 触发 layout + paint，卡顿风险高
如果必须用 top（比如配合 position: relative 做布局微调），至少确保该元素已启用硬件加速：
.card { will-change: transform; /* 提前告知浏览器将有变换 */ /* 或 */ transform: translateZ(0); }box-shadow 过渡容易卡顿？检查模糊半径和颜色透明度
box-shadow 的过渡性能受两个参数影响最大：blur-radius 和 alpha 通道。大模糊值（如 32px）+ 半透明色（如 rgba(0,0,0,0.15)）会显著增加每帧绘制成本。
实操建议：
- 模糊值控制在
4px–12px之间更稳妥 - 避免在
hover中突然把box-shadow从none变成带大模糊的阴影；改用渐进式变化，比如0 2px 4px → 0 6px 12px - 阴影颜色尽量用
hsla()或rgba()，别用transparent—— 浏览器对transparent的过渡插值不一致，某些版本会跳变
过渡时间与缓动函数怎么选才不生硬
0.2s–0.35s 是卡片悬停滑动最自然的时间范围。太短（0.1s）像弹跳，太长（0.5s）显得迟滞。
缓动函数别只用 ease。对“上浮+加阴影”这种轻量交互，推荐：
-
cubic-bezier(0.25, 0.46, 0.45, 0.94)—— 类似ease-out，起始快、结束柔，符合物理直觉 - 或直接用
ease-in-out，比默认ease更对称，动效更干净
注意：不要给 transform 和 box-shadow 设不同持续时间或缓动，否则两者脱节，视觉上像“影子没跟上卡片”。
真正难调的不是参数本身，而是多个卡片同时 hover 时的节奏一致性——务必统一所有卡片的 transition 声明，包括顺序、时长、函数，哪怕它们 dom 结构略有差异。