最稳妥纯CSS实现是transform: translateY(-4px)搭配box-shadow从0 2px 6px rgba(0,0,0,0.1)过渡到0 8px 20px rgba(0,0,0,0.18)，并分开声明transition属性，避免all；需兼顾移动端:active反馈及重排规避。
悬停时卡片整体上浮 + 阴影增强最稳妥
纯 CSS 实现商品卡片悬停动画，最可靠的方式不是靠 transform: translateY(-5px) 单独上移，而是搭配 box-shadow 动态加深，视觉上更“立体”。只改 transform 容易让文字或图标边缘发虚（尤其在 Safari 或缩放后），而加阴影能强化层级感，且兼容性好。
- 务必给卡片容器设
transition: transform 0.2s ease, box-shadow 0.2s ease，两个属性分开写，避免用all导致意外过渡 -
transform: translateY(-4px)比 -8px 更自然；超过 -6px 就容易显得“弹跳过猛” -
box-shadow推荐从0 2px 6px rgba(0,0,0,0.1)过渡到0 8px 20px rgba(0,0,0,0.18)，数值太大阴影会“糊”成一片
图片区域单独缩放会破坏布局流
很多教程让 .card img 在 hover 时加 transform: scale(1.05)，但实际中容易撑开父容器、导致卡片高度跳变，尤其当图片没设 max-width: 100% 或没统一宽高比时。
- 正确做法是把图片包在
overflow: hidden的容器里，再对容器做transform，比如：.card-img-wrapper { overflow: hidden; height: 180px; } - 缩放值控制在
scale(1.03)以内，肉眼可感知但不突兀 - 如果卡片内容有价格/标签等绝对定位元素，记得给它们加
z-index: 2，否则会被缩放后的图片盖住
hover 动画在移动端根本不会触发
CSS :hover 在 iOS 和 Android 大部分浏览器里默认不生效——用户没“悬停”这个动作。直接写 .card:hover 的动画，在手机上等于没写。
- 真要兼顾移动端，得用
@media (hover: hover) and (pointer: fine)包一层，只让鼠标设备执行 hover 动画 - 移动端可改用
:active做点击反馈，比如.card:active { transform: scale(0.98); }，但注意它只在按住瞬间生效 - 别依赖 hover 做关键交互，比如“显示购买按钮”，那得用 JS 监听
touchstart+touchend来切换 class
动画卡顿？检查是否触发了重排
如果 hover 后明显掉帧，大概率是因为动了会触发 layout 的属性，比如 width、height、top、left，或者没开启硬件加速。
立即学习“前端免费学习笔记（深入）”；
- 只用
transform和opacity是安全的，它们走合成层，不触发布局计算 - 给卡片加
will-change: transform能提前提示浏览器优化，但别滥用——只加在真正需要动画的元素上 - Chrome DevTools → Rendering → “Paint flashing” 可直观看到哪些区域在频繁重绘，红色块多就是问题点
