需要安抚用户、降低焦虑或营造平静/冥想体验时…

在冥想、健康、阅读、长加载、夜间模式等需要让用户平静放松的界面中，按以下参数设计动画。

适用场景

解决思路

1. 整体情感目标：让平静来自缓慢、轻柔、可预测的运动；让放松来自会呼吸、自然流动、从不索取注意力或制造紧张的动画。
2. Squash & Stretch：使用极轻微（2-5%）的挤压拉伸；通过温和呼吸或脉动而非弹跳；做柔软、有机的变形，像云或水。
3. Anticipation：准备阶段拉长到 200-400ms；缓慢起势，不制造意外；所有变化都提前充分预示。
4. Staging：采用柔和焦点和环境式布局；避免强烈吸引注意；元素和谐共享空间，不互相竞争。
5. Straight Ahead Action：环境动画使用轻柔、有机的流动；实现云漂移、粒子漂浮、微妙渐变，并加入自然随机。
6. Follow Through & Overlapping Action：延长并优雅地做跟随动作；稳定时间用 500ms+；元素像水面落叶一样漂到静止。
7. Slow In & Slow Out：两端都使用重度缓动；非常渐进地加速和减速；使用 cubic-bezier(0.4, 0, 0.6, 1) 实现平滑、轻柔的运动。
8. Arc：使用宽大扫掠曲线、平缓抛物线；运动像水或风一样流动，避免有棱角或突兀。
9. Secondary Action：添加环境、背景运动；使用微妙视差、轻柔漂浮元素；支持性运动不索取注意力。
10. Timing：慢且有意识，使用 400-800ms+；长时长带来冥想感；避免快速运动；呼吸节奏为每循环 4-6 秒。
11. Exaggeration：最小化或不用夸张；使用现实、自然的运动；保持微妙以平静，避免夸张造成紧张。
12. Solid Drawing：使用软边缘、圆润形态；避免尖角；使用自然、舒适的有机形状。
13. Appeal：使用柔和颜色、低对比度、轻柔渐变、圆角形状、自然有机美学。
14. 时间建议：Fade transitions 使用 400-600ms、ease-in-out；Floating elements 使用 3000-5000ms、ease-in-out；Breathing pulse 使用 4000-6000ms、ease-in-out；Parallax drift 使用 800-1200ms、ease-out。
15. CSS 缓动变量：定义 --calm-gentle: cubic-bezier(0.4, 0, 0.6, 1)；--calm-float: cubic-bezier(0.37, 0, 0.63, 1)；--calm-breathe: cubic-bezier(0.45, 0, 0.55, 1)。
16. 呼吸动画：定义 @keyframes calm-breathe，0%, 100% 设置 transform: scale(1) 和 opacity: 0.8；50% 设置 transform: scale(1.02) 和 opacity: 1；将 .breathing-element 应用 animation: calm-breathe 5s ease-in-out infinite。

适用边界 · 注意事项

• 需要立即抓住注意力的场景：紧急错误、倒计时、关键警报、需要高唤醒度的 CTA。
• 高能量或强反馈场景：游戏、竞技、庆祝/成功爆发、快速微交互。
• 极短交互或高频操作：用户需要即时反馈且等待感会受损时。