卡片hover下移应克制位移（4px~8px）、用ease-out或cubic-bezier缓动、显式声明默认transform: translateY(0)，并组合scale(0.995)与box-shadow增强真实感。
卡片 hover 下移过渡不自然，通常是因为 transform: translateY() 的位移值过大、过渡时间过短，或未配合其他 transform 属性（如 scale、opacity）协同变化，导致视觉突兀。关键不是“能不能动”，而是“怎么动得顺”。
位移距离要克制，建议 4px ~ 8px
人眼对垂直位移非常敏感，超过 10px 就容易显得“跳”。下移太猛会破坏卡片的稳定感，尤其在密集布局中更明显。
- 推荐起手值：translateY(4px) 或 translateY(6px)
- 避免用
translateY(12px)或百分比（如translateY(5%)），后者随卡片高度变化，不可控 - 若需强调反馈，优先加
scale(1.01)或微调box-shadow，而非加大位移
transition 要选对缓动函数和时长
默认 ease 在 hover 启动时偏慢，收尾又太快，容易“一顿一弹”。用 ease-out 或自定义 cubic-bezier 更稳。
- 基础写法：
transition: transform 0.25s ease-out; - 更柔和可试：
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);（类似 ios 弹性回弹前段） - 别漏写
transition-Property—— 只过渡transform，避免连带background-color等引发重绘抖动
确保 transform 不被其他样式覆盖或重置
常见坑：hover 里写了 transform: translateY(6px)，但默认状态没设 transform: translateY(0)，或被父元素 transform 干扰，导致动画起点漂移。
立即学习“前端免费学习笔记（深入）”；
- 卡片默认态显式声明：
transform: translateY(0); - 避免父容器设
transform（如scale或rotate），它会创建新层叠上下文并影响子元素 transform 基准 - 检查是否误用了
top/bottom+position: relative替代 transform —— 这会触发 layout，动画必然卡顿
搭配阴影与缩放提升真实感
单一下移缺乏立体反馈。轻微下沉应伴随“受压感”：阴影变大变柔 + 微缩放抵消浮空感。
- 示例组合：
transform: translateY(6px) scale(0.995);box-shadow: 0 6px 16px -4px rgba(0,0,0,0.12); - scale 略小于 1（如 0.995）能模拟轻微受压，比纯位移更可信
- 阴影的
blur和spread适度增加，但避免突然变黑变重
基本上就这些。不复杂，但容易忽略起点声明、缓动选择和组合反馈。调的时候盯着动效看三遍：入场顺吗？停稳了吗？撤回时有没有“吸回去”的感觉？有就有戏。