卡片hover抖动主因是尺寸/边距突变引发重排，应改用transform（如translateY、scale）替代margin/padding等属性，配合will-change: transform、box-sizing: border-box及仅过渡transform和opacity来稳定布局。
卡片 hover 抖动通常是因为元素在悬停时尺寸、边距或内边距发生了突变，导致文档流重排（reflow）或重绘（repaint），视觉上表现为“跳动”或“抖动”。要解决这个问题，核心是：保持布局稳定 + 合理使用过渡。
用 transform 替代位移类属性
避免使用 margin、padding、width/height 等会触发重排的属性做 hover 动画。改用 transform: translateY() 或 scale()，它们只触发合成层变化，性能好且不挤占其他元素空间。
- ✅ 推荐写法：
transform: translateY(-5px); - ❌ 避免写法：
margin-top: -5px;或top: -5px;（若未设 position）
提前声明 transform 层级（启用 GPU 加速）
为卡片添加 will-change: transform; 或初始 transform: translateZ(0);，可提前创建独立合成层，减少渲染抖动。
- 建议加在基础样式中（非 hover 里）：
card { transform: translateZ(0); } - 如需兼容性更稳，可加
backface-visibility: hidden;
统一设置 transition 属性
只对 transform 和 opacity 做过渡，避免对 layout 属性（如 width、margin）加 transition，否则动画过程仍可能引发微小重排。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
transition: transform 0.3s ease, opacity 0.3s ease; - ❌ 混搭：
transition: all 0.3s;（容易误触布局属性） - 注意：不要在 hover 中重复声明未变化的属性，比如 hover 里只改 transform，就别再写 opacity
检查盒模型与溢出行为
抖动有时源于内容撑开卡片、阴影扩大、或 border 变化导致尺寸波动。确保：
- 卡片设
box-sizing: border-box; - hover 阴影用
box-shadow（不改变尺寸），而非增宽 border - 文字不换行或溢出：加
overflow: hidden;和white-space: nowrap;（视需求） - 图片用
object-fit: cover;并固定宽高，避免加载后重排
