卡片内元素位移应使用 transform: translate() 配合 transition 实现硬件加速，避免 left/top/margin 等触发重排的属性；启用 will-change: transform 提升渲染优先级，搭配合理 timing-function 和 transform-origin 可提升动效顺滑度与自然感。

卡片内元素移动僵硬，核心问题通常是直接改 left/top 或用 margin 位移，触发重排（reflow），浏览器没法平滑插值。用 transform: translate() 配合 transition 就能实现硬件加速、高帧率的细腻位移。

只对 transform + transition 做动画

确保位移动画只依赖 transform 属性（如 translateX、translateY、scale），不要混用 width、height、margin、left 等会触发布局计算的属性。

• ✅ 正确写法：transition: transform 0.3s ease-out;
• ❌ 避免写法：transition: margin-left 0.3s, opacity 0.3s;（margin 触发重排）

启用 will-change 提升渲染优先级

对频繁动画的元素提前提示浏览器：“这个元素要动了”，让它提前准备图层和缓存。

• 加在 hover 或交互前的状态里：will-change: transform;
• 用完可适时清除（比如用 JS 在动画结束后移除），避免长期占用内存
• 注意：不要滥用，仅用于真正需要优化的卡片子元素（如图标、标题、按钮）

选对 timing-function 让位移更自然

默认的 ease 有时还是太“冲”。根据动效意图换更细腻的缓动函数：

• 想轻柔入场？用 cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 material 的标准 enter）
• 想有弹性回弹感？用 ease-in-out 或自定义弹跳贝塞尔（如 cubic-bezier(0.68, -0.55, 0.27, 1.55)）
• 微位移（如 hover 抬升 4px）建议用 0.2s 以内 + ease-out，避免拖沓

用 transform-origin 精控旋转/缩放锚点

如果卡片内元素还涉及旋转或缩放（比如 hover 时图标轻微放大+上浮），记得设好基准点：

• transform-origin: center top; —— 从顶部中心缩放，更显轻盈
• transform-origin: 50% 0; —— 等价写法，兼容性更好
• 避免默认的 50% 50% 导致意外“漂移”，尤其配合 translate 时

基本上就这些。不复杂但容易忽略——关键是把位移逻辑从“布局变动”转向“图层变换”，再配上合理的时长和缓动，卡片内的动效立刻顺滑起来。