卡片/面板/瓦片/容器做交互动画时：用迪士尼12原则增加深度…

适用于给卡片、面板、瓦片或容器添加悬停、选中、展开、拖拽重排等动效，让界面更有层次和交互感。

适用场景

解决思路

1. 对卡片应用挤压与拉伸：拖拽开始时轻微压缩，释放时拉伸，缩放变化最大控制在 2-3%。
2. 对卡片展开到详情视图使用预备动作：先短暂缩放到 0.98，持续 50ms，再展开。
3. 对交互卡片使用舞台聚焦：通过 z-index 和 box-shadow 将其抬升到其他卡片之上，同时降低背景卡片亮度或加 blur，聚焦注意力。
4. 对卡片采用明确姿态与逐帧过渡：定义 resting、hovered、selected、expanded 等清晰状态，并在这些关键帧之间做 pose-to-pose 过渡。
5. 对卡片内容应用跟随与重叠动作：文本、图片、图标略微滞后于卡片移动，错开 20-40ms，产生自然感。
6. 对卡片动效应用缓入缓出：卡片抬升使用 ease-out，卡片稳定使用 ease-in-out；不要用 linear；平滑抬升使用 cubic-bezier(0.25, 0.1, 0.25, 1)。
7. 对卡片重排（拖放）应用弧线路径：不要走直线，移动时加入轻微旋转。
8. 对卡片添加次要动作：卡片抬升为主动作时，阴影扩大并模糊；内部图片可轻微缩放；边框可发光。
9. 对卡片按场景设置 timing：hover 抬升 200-250ms；选中 150ms；展开到详情 300-400ms；重排/洗牌 250-350ms；卡片之间错开 50-75ms。
10. 对卡片使用夸张：hover 阴影可扩展到常规深度的 2-3 倍；选中卡片可抬升 8-12px；与卡片尺寸保持比例。
11. 对卡片保持扎实的绘图感：缩放时保持一致的 border-radius 比例；阴影始终来自同一光源；保持宽高比。
12. 对卡片营造吸引力：圆角显得友好，轻微阴影增加高级感，平滑过渡建立信任；卡片应像物理对象。
13. CSS 实现：使用 .card { transition: transform 250ms ease-out, box-shadow 250ms ease-out; }，.card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 12px 40px rgba(0,0,0,0.15); }，.card-content { transition: transform 280ms ease-out; /* slight lag */ }。
14. 关键属性：用 transform 的 translateY、scale、rotate；用 box-shadow 表现深度和抬升；用 z-index 分层；用 filter 的 blur 处理背景；用 opacity 处理聚焦状态。

适用边界 · 注意事项

• 当用户或系统启用 prefers-reduced-motion 时，不应继续使用这些位移、缩放、旋转和错峰动画，应降级为即时状态切换或极短过渡。
• 当界面是高频、数据密集的大列表且大量卡片同时动画时，不宜使用大幅阴影、模糊和错峰，以免掉帧和干扰阅读。
• 当卡片需要严格像素级对齐、无位移的静态布局或打印/导出场景时，不适用这些动态深度效果。