continuous-infinite

连续动画（无限循环）

无限动画没有结束状态。它们用于表示持续进行的过程、营造氛围，或提供持续的视觉趣味。挑战在于：避免造成疲劳。

连续运动的迪士尼原则

可持续应用

挤压与拉伸：幅度轻微、节奏平稳，振荡幅度为 5-10%，不会引人注意。像呼吸，而不是弹跳。

预备动作：融入循环中，每个周期都应自然过渡到下一个周期，不出现明显的重新开始。

演出布局：构建背景层级，连续运动不得与交互元素争抢注意力。

直线运动/姿势到姿势：无缝循环优先采用姿势到姿势的方式，终点必须与起点完美衔接。

跟随动作：让波动依次传播，使元素按顺序移动，形成自然流动感。

慢入慢出：采用平滑、无尽的曲线，不要突然加速，以免引人注意。

弧线：采用圆形、轨道式路径，自然回到起点。可使用 8 字形、椭圆和波浪轨迹。

次要动作：叠加多层环境运动，让多个元素以不同速度移动，从而营造纵深感。

节奏：让周期时长各不相同，元素不要同步。使用互质的周期时长（3s、5s、7s）。

夸张：尽量减少。细微的动作可以避免疲劳，用户几乎不应察觉到运动。

扎实绘图：优先采用简单的变换，复杂动画会消耗电量并分散注意力。

吸引力：保持平和，而非混乱。连续运动应让人平静，而不是兴奋。

循环时长指南

• 加载旋转图标：周期为 800-1200ms
• 呼吸/脉动：周期为 2000-4000ms
• 环境背景：周期为 5000-15000ms
• 轻微浮动：周期为 3000-8000ms

缓动建议

/* Seamless breathing */
animation-timing-function: ease-in-out;

/* Perpetual smooth motion */
animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);

/* Organic, natural feeling */
animation-timing-function: cubic-bezier(0.45, 0.05, 0.55, 0.95);

最佳使用场景

• 加载/进度指示器
• 环境背景效果
• 音乐可视化
• 屏幕保护程序风格的显示
• 状态指示器（脉动的在线状态圆点）
• 吸引注意力的效果（轻柔的通知脉动）
• 装饰性运动（浮动粒子）

实现模式

/* Seamless spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spinner {
  animation: spin 1000ms linear infinite;
}

/* Breathing pulse */
@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;
}

/* Floating ambient - use multiple with prime-number durations */
@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; }

反面模式

• 将多个连续动画同步
• 高频运动（会引起恶心）
• 在周边视野中进行大范围运动
• 与主要内容争抢注意力
• 用户输入/聚焦期间仍持续运行

关键见解

连续动画必须做到设计上不可察觉。如果用户在最初几秒后仍能有意识地注意到它们，说明动作过于强烈。最好的无限动画给人氛围感，而不是让人看到运动。