卡片悬停上浮最稳方案是 transform: translatey(-8px) 配合 transition: transform .2s–.3s cubic-bezier(.4,0,.2,1)，避免重排、兼顾性能与手感，需注意热区连续性、移动端优化及多卡片场景兼容性。
卡片悬停上浮用 transform: translateY() 最稳
直接改 margin 或 top 会触发重排，动画卡顿；transform 只触发重绘，GPU 加速，手感顺滑。上浮本质是沿 Y 轴向上偏移，translateY(-8px) 比 translateY(-10%) 更可控——百分比依赖父容器高度，容易飘。
- 必须搭配
transition才有缓动效果，只写:hover会突变 -
transition推荐只过渡transform和box-shadow，避免连带color或opacity一起过渡，拖慢响应 - 移动端需加
will-change: transform（可选），提前告知浏览器该元素将变化，减少首次悬停卡顿
transition 的时长和缓动函数怎么选
太短（.1s）像抽搐，太长（.5s）显迟滞。主流卡片交互取 .2s～.3s，配合 cubic-bezier(.4,0,.2,1)（即 ease-out 的变体），起始快、收尾柔和，符合物理直觉。
- 别用
all做过渡属性：transition: all .3s会让所有变更都套缓动，包括你没想动的border-color，容易意外干扰 - 如果卡片同时加阴影，
box-shadow必须显式写进transition，否则阴影变化会突兀 - IE10+ 支持
transform，但 IE 不认cubic-bezier高阶贝塞尔，稳妥起见可用ease-out
为什么鼠标移入移出有时会“抖”或“跳”
常见原因是悬停区域不连续：卡片内有空隙、子元素 margin 外溢、或用了 position: relative 但未设 z-index 导致层叠错乱。悬停失效瞬间，鼠标实际划出了 :hover 作用域，触发回退动画，再立刻进入，形成抖动循环。
- 给卡片容器加
overflow: hidden，防止子元素溢出破坏热区 - 确保悬停目标是同一元素：不要对
.card写:hover，却在内部.card__content上设transform，应统一作用于容器 - 若卡片含图片或图标，加载完成前高度为 0，可能造成悬停区域塌陷，建议预设
min-height或用aspect-ratio
兼容性与性能容易被忽略的点
安卓微信内置浏览器（X5 内核）对 transform + transition 组合偶发掉帧，尤其卡片多且密集时。不是代码写错，而是渲染管线压力大。
- 避免在
:hover中触发动态计算（如 JS 修改 class 后再加 transition），纯 CSS 方案最可靠 - 卡片数量超 20 个时，考虑用
@media (hover: hover)包裹悬停样式，防止触摸设备误触发 - 慎用
filter: drop-shadow()替代box-shadow：前者强制全图渲染，滚动时明显卡顿
真正难的不是写出来，是让上浮在各种屏幕、各种网络条件下都不飘、不卡、不闪——得盯着真机调，而不是只看 DevTools 里的动画时间线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
