用途
持续无限动画（Continuous / Infinite Animations）没有结束状态，用于指示正在进行的过程、营造氛围或保持持续的视觉趣味。其核心挑战在于避免用户疲劳。该技能适用于构建长期运行的加载状态、环境动效和背景效果。
迪士尼原则在持续运动中的应用
- 挤压与拉伸（Squash & Stretch）：细微而有节奏，5-10% 的振荡，不索取注意力。是呼吸，不是弹跳。
- 预备（Anticipation）：内建于循环之中——每个周期应自然流入下一个周期，不出现可见的重启。
- 布局（Staging）：背景层级——持续运动不得与交互元素竞争。
- 逐帧与关键帧（Straight Ahead / Pose to Pose）：无缝循环用关键帧方式——终点必须与起点完美匹配。
- 跟随动作（Follow Through）：波浪传播——元素依次运动，形成自然流动。
- 慢入慢出（Slow In / Slow Out）：平滑无尽的曲线——不要有引人注意的急加速。
- 弧线（Arcs）：圆形、轨道式路径——自然回到原点，如 8 字形、椭圆、波浪。
- 次要动作（Secondary Action）：分层氛围运动——多个元素以不同速度运动以营造深度。
- 时间（Timing）：变化的循环长度——元素不应同步，可使用质数关系（3s、5s、7s）。
- 夸张（Exaggeration）：最小化——细微才能避免疲劳，用户应几乎察觉不到运动。
- 立体造型（Solid Drawing）：优先使用简单变换——复杂动画消耗电量与注意力。
- 吸引力（Appeal）：平静而非混乱——持续运动应当抚慰，而非刺激。
循环时长指南
- 加载旋转器：800-1200ms 周期
- 呼吸/脉动：2000-4000ms 周期
- 环境背景：5000-15000ms 周期
- 轻微漂浮：3000-8000ms 周期
缓动推荐
/* 无缝呼吸 */
animation-timing-function: ease-in-out;
/* 永恒平滑运动 */
animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
/* 有机、自然的感觉 */
animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);
最佳使用场景
- 加载/进度指示器
- 环境背景效果
- 音乐可视化器
- 屏保式显示
- 状态指示（脉动的在线圆点）
- 吸引注意（温和的通知脉动）
- 装饰性运动（漂浮粒子）
实现模式
/* 无缝旋转 */
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1000ms linear infinite;
}
/* 呼吸脉动 */
@keyframes breathe {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.05); opacity: 1; }
}
.pulse {
animation: breathe 3000ms ease-in-out infinite;
}
/* 漂浮氛围 - 配合质数时长多实例使用 */
@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
33% { transform: translateY(-10px) rotate(2deg); }
66% { transform: translateY(5px) rotate(-1deg); }
}
.float-a { animation: float 5000ms ease-in-out infinite; }
.float-b { animation: float 7000ms ease-in-out infinite; }
.float-c { animation: float 11000ms ease-in-out infinite; }
反模式
- 同步多个持续动画
- 高频运动（引起恶心）
- 周边视野中的大幅移动
- 与主内容竞争
- 在用户输入/聚焦期间继续运行
关键洞见
持续动画必须在设计上不可见。如果用户在头几秒之后还有意识地注意到它们，说明过于激进。最好的无限动画是被感受为氛围，而不是被看到为运动。