17370845950

卡片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 适度增加，但避免突然变黑变重

基本上就这些。不复杂，但容易忽略起点声明、缓动选择和组合反馈。调的时候盯着动效看三遍：入场顺吗？停稳了吗？撤回时有没有“吸回去”的感觉？有就有戏。