卡片hover上移过快需用transition精细控制transform，正确写法为transition: transform 0.4s cubic-bezier(0.25,0.46,0.45,0.94)，禁用all；只用transform位移，避免margin/position混用；可选加will-change: transform提升性能。
卡片 hover 时上移过快，本质是 transform: translateY(-10px) 的变化太突兀，缺过渡节奏。核心解法不是删掉 transform，而是用 transition 精细控制它的执行时长、缓动曲线和触发属性。
只过渡 transform，避免牵连其他属性
错误写法：transition: all 0.3s ease; —— 会连颜色、边框、阴影等一起过渡，干扰焦点，还可能触发重排。
正确写法：明确限定只过渡 transform：
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);- 时长从默认的毫秒级（如 0.1s）拉到 0.3–0.5s，人眼能感知平滑感
- 推荐用
cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似“先慢后快再缓停”），比纯ease更自然
hover 状态里只改 transform，别混用 margin 或 position
如果同时写了 margin-top: -10px 或 top: -10px，会和 transform: translateY() 叠加或冲突，导致跳变或过渡失效。
立即学习“前端免费学习笔记（深入）”；
- 统一用
transform: translateY(-8px)实现上浮（数值可微调，-5px～-12px 均可） - 确保默认状态和 hover 状态都只靠 transform 位移，不掺杂布局属性
- 若需配合阴影增强浮起感，用
box-shadow并单独加 transition（如transition: transform 0.4s, box-shadow 0.3s）
加 will-change 提升动画性能（可选但推荐）
对频繁 hover 的卡片，浏览器可能来不及优化渲染。提前声明将要变化的属性，能触发 GPU 加速：
- 在默认状态加：
will-change: transform; - 注意不要滥用——仅用于高频交互元素，否则反而增加内存开销
- 搭配 transform 过渡，上移动作更顺滑，尤其在低端设备或复杂页面中效果明显
基本上就这些。关键不是“让卡片动得慢”，而是让动得有节奏、有预期、不抢戏。transition 的值调准了，hover 就从“弹一下”变成“轻轻托起”的质感。
