Back to Details

continuous-infinite

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Continuous Animations (Infinite)

持续循环动画（无限）

Infinite animations run without end state. They indicate ongoing processes, create ambient atmosphere, or provide persistent visual interest. The challenge: avoiding fatigue.
无限动画没有结束状态。它们用于指示进行中的流程、营造环境氛围，或提供持续的视觉吸引力。挑战在于：避免让用户产生疲劳感。

Disney Principles for Continuous Motion

持续动效的迪士尼动画原则

Sustainable Application

适度应用

Squash & Stretch: Subtle, rhythmic - 5-10% oscillation that doesn't demand attention. Breathing, not bouncing.
Anticipation: Built into loop - each cycle should flow naturally into the next without visible restart.
Staging: Background hierarchy - continuous motion must not compete with interactive elements.
Straight Ahead/Pose to Pose: Pose to pose for seamless loops - endpoint must match startpoint perfectly.
Follow Through: Wave propagation - elements should move in sequence, creating natural flow.
Slow In/Slow Out: Smooth, endless curves - no sharp accelerations that call attention.
Arcs: Circular, orbital paths - return to origin naturally. Figure-8s, ellipses, waves.
Secondary Action: Layered ambient motion - multiple elements at different speeds create depth.
Timing: Varied cycle lengths - elements should NOT sync up. Use prime number relationships (3s, 5s, 7s).
Exaggeration: Minimal - subtlety prevents fatigue. Users should barely notice the motion.
Solid Drawing: Simple transforms preferred - complex animations drain battery and attention.
Appeal: Calm, not chaotic - continuous motion should soothe, not stimulate.
挤压与拉伸：微妙、有节奏的5-10%幅度变化，不吸引过多注意力。类似呼吸，而非弹跳。
预备动作：融入循环——每个周期应自然过渡到下一个，无明显重启痕迹。
构图布局：背景层级——持续动效不得与交互元素争夺注意力。
逐帧动画/关键帧动画：使用关键帧动画实现无缝循环——终点必须与起点完全匹配。
跟随动作：波浪式传播——元素应按顺序运动，营造自然流畅感。
缓入缓出：平滑、无间断的曲线——避免会引起注意的急剧加速。
弧线运动：圆形、轨道式路径——自然回到原点。如8字形、椭圆形、波浪形。
次要动作：分层环境动效——不同速度的多个元素营造层次感。
时间节奏：变化的周期时长——元素切勿同步。使用质数关系的时长（如3秒、5秒、7秒）。
夸张表现：尽可能克制——微妙的动效可避免疲劳。用户应几乎注意不到动效。
扎实绘制：优先选择简单变换——复杂动画会消耗电量和注意力。
吸引力：平静而非混乱——持续动效应起到舒缓作用，而非刺激用户。

Loop Duration Guidelines

循环时长指南

  • Loading spinners: 800-1200ms cycles
  • Breathing/pulsing: 2000-4000ms cycles
  • Ambient background: 5000-15000ms cycles
  • Subtle floating: 3000-8000ms cycles
  • 加载 spinner：800-1200毫秒周期
  • 呼吸/脉动效果：2000-4000毫秒周期
  • 环境背景动效：5000-15000毫秒周期
  • 微妙漂浮效果：3000-8000毫秒周期

Easing Recommendations

缓动函数推荐

css
/* 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);
css
/* 无缝呼吸效果 */
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);

Best Use Cases

最佳应用场景

  • Loading/progress indicators
  • Ambient background effects
  • Music visualizers
  • Screensaver-style displays
  • Status indicators (pulsing online dot)
  • Attention-getters (gentle notification pulse)
  • Decorative motion (floating particles)
  • 加载/进度指示器
  • 环境背景动效
  • 音乐可视化效果
  • 屏保风格展示
  • 状态指示器（脉动在线圆点）
  • 注意力提醒（温和的通知脉动）
  • 装饰性动效（漂浮粒子）

Implementation Pattern

实现模式

css
/* 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; }
css
/* 无缝旋转 */
@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; }

Anti-Patterns

反模式

  • Synchronizing multiple continuous animations
  • High-frequency motion (causes nausea)
  • Large-scale movement in peripheral vision
  • Competing with primary content
  • Running during user input/focus
  • 同步多个持续循环动画
  • 高频动效（易引发眩晕）
  • 边缘视野中的大尺度运动
  • 与核心内容争夺注意力
  • 在用户输入/聚焦时运行动效

Key Insight

核心要点

Continuous animations must be invisible by design. If users consciously notice them after the first few seconds, they're too aggressive. The best infinite animations are felt as atmosphere, not seen as motion.
持续循环动画必须以“无形”为设计目标。如果用户在最初几秒后仍能有意识地注意到它们，说明动效过于突兀。最佳的无限动画是作为氛围存在，而非被感知为动效。