卡片悬停上浮应使用 transform: translateY() 配合 transition 实现，避免重排卡顿，需同步增强 box-shadow 以强化立体感，并注意兼容性与性能细节。
卡片悬停上浮用 transform: translateY() 最稳妥
直接改 top 或 margin-top 会触发重排，动画卡顿；transform 只影响合成层，GPU 加速，顺滑。关键不是“能不能动”，是“动得省不省资源”。
实操建议：
- 必须搭配
transition声明，且只过渡transform和box-shadow等可硬件加速的属性 - 上浮距离别太大，
translateY(-4px)到translateY(-8px)是常见安全范围 - 别在父容器设
overflow: hidden—— 上浮后卡片可能被裁掉，尤其带阴影时 - 移动端慎用：部分安卓 WebView 对
transform悬停响应延迟，建议加touch-action: manipulation
为什么 transition 要写在默认状态，而不是 :hover 里
写在默认状态（比如 .card { transition: transform 0.2s ease; }）才能保证鼠标移入、移出都平滑。如果只写在 :hover 里，移出时没过渡，会“啪”一下掉回去。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 悬停上浮正常，但鼠标一走，卡片瞬间砸回原位
- 动画只在进入时生效，退出像断电
- 多个卡片同时 hover 时，有的卡、有的跳——往往是 transition 位置不统一
参数差异点：
-
ease比linear更自然，符合物理惯性；cubic-bezier(0.25, 0.46, 0.45, 0.94)是更细腻的“缓入缓出”微调 - 时间控制在
0.18s–0.25s之间最舒服；超过0.3s显拖沓，低于0.12s又像没反应
阴影同步变大才显得真“浮起来”
单靠上移会像“贴着天花板飘”，必须配合 box-shadow 扩散和加深，视觉才有立体感。这点常被忽略，结果动画做了，但用户根本没感知“浮”。
实操建议：
- 默认阴影用细、浅、小扩散：
box-shadow: 0 2px 4px rgba(0,0,0,0.1) - hover 时同步增强：
box-shadow: 0 6px 12px rgba(0,0,0,0.15) - 别改
opacity或filter: blur()—— 这些属性过渡开销大，易掉帧 - 如果卡片有圆角，确保
border-radius不变；改圆角会触发重绘，抵消 transform 的优化收益
IE11 和旧 Safari 的兼容性补丁怎么加
IE11 支持 transform，但不支持 transform: translateY() 的独立写法（需完整写 transform: translate(0, -4px)）；老 Safari（will-change 处理异常，反而更卡。
性能 / 兼容性影响：
- 加
will-change: transform在 hover 前可能引发内存泄漏，尤其卡片多时；现代浏览器已自动优化，不建议手动加 - 真要兼容 IE11：用
transform: translate(0, -4px)替代translateY(-4px)，并保留-ms-transform前缀（尽管实际已不必要） - 旧 iOS Safari（transition-timing-function 的 cubic-bezier 解析不准，优先用
ease或ease-out
复杂点在于：上浮动画看着简单，但阴影、层级、焦点状态（比如键盘 tab 进入时要不要触发）、暗色模式下阴影颜色适配……全得一起动。漏掉一个，用户就觉得“怪，但说不上哪不对”。
