制作传达奢华与精致的优雅动画时，如何用克制…

适用于奢侈品、时尚、高端品牌等需要优雅、精致、低调奢华观感的动画设计场景。

适用场景

解决思路

1. Squash & Stretch：形变压缩拉伸极度最小化（0-5%），精致物体不应变形，要像滑行一样移动，全程保持完美比例。
2. Anticipation：预备动作要细微精致（100-150ms），像轻微重心转移而非蓄力挥动，让优雅运动平滑起步。
3. Staging：善用负空间与克制，让元素有呼吸感，聚焦单一视觉焦点并留出充裕边距，少即是多。
4. Straight Ahead Action：避免使用，优雅需要控制与精确，每一帧都应有意图且精致。
5. Follow Through & Overlapping Action：收尾要优雅且延长，像丝绸落下，长时间平滑减速，不要弹跳或抖动。
6. Slow In & Slow Out：两端都使用延展缓动，运动渐进流畅；精致过渡使用 cubic-bezier(0.4, 0, 0.2, 1)。
7. Arc：使用扫掠般优雅的曲线，像指挥棒或舞者的手臂，追求优美的运动路径而不只是起止点。
8. Secondary Action：只保留极少量、有目的的强调，比如细微的阴影变化或轻柔高光，辅助运动应提升而非分散注意。
9. Timing：不慌不忙但也不拖沓（300-500ms），给观者欣赏运动的时间，奢华不匆忙。
10. Exaggeration：几乎不用夸张（0-10%），运动真实精致，在细微处体现完美。
11. Solid Drawing：保持无可挑剔的比例，不发生畸变，追求几何精确与平衡。
12. Appeal：使用干净的线条与完美比例，采用单色或有限调色板，追求隽永的美学。
13. 时间建议：Fade 用 300-400ms、ease-in-out；Slide 用 400-500ms、ease-out；Scale 用 350-450ms、ease-in-out；Reveal 用 500-700ms、ease-out。
14. 定义 CSS 缓动变量：--elegant-smooth: cubic-bezier(0.4, 0, 0.2, 1); --elegant-enter: cubic-bezier(0.0, 0, 0.2, 1); --elegant-flow: cubic-bezier(0.45, 0, 0.55, 1);
15. 用 @keyframes elegant-reveal 实现精致揭示：from 为 opacity: 0 和 translateY(10px)，to 为 opacity: 1 和 translateY(0)，并在 .elegant-element 上使用 animation: elegant-reveal 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards。
16. 遵循设计原则：空白是主动的设计元素而非空余；动效用来揭示内容而非装饰；时间把控体现自信与品质；每个动画都要证明自己的价值；克制体现驾驭能力。

适用边界 · 注意事项

• 需要强烈夸张、活泼俏皮或高能量视觉冲击的动画场景。
• 需要复杂、高频、装饰性动效堆叠的产品界面。