continuous-loops

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Continuous Loop Animations

连续循环动画

Apply Disney's 12 principles to animations that never stop.

将迪士尼12条动画原则应用于永不停止的动画中。

Principle Application

原则应用

Squash & Stretch: Subtle scale oscillation (0.98-1.02) creates organic breathing. Avoid rigid mechanical loops.

Anticipation: Build anticipation into the loop cycle. Brief pause at extremes before reversing.

Staging: Loops should support, not dominate. Keep amplitude subtle for background elements.

Straight Ahead vs Pose-to-Pose: Design keyframe poses that loop seamlessly. End frame must flow into start frame.

Follow Through & Overlapping: Multi-part loops have elements at different phases. Three dots pulse with 120° phase offset.

Slow In/Slow Out: Use ease-in-out for smooth oscillations. Linear motion looks mechanical.

Arcs: Circular motion follows true arcs. Spinners rotate, pendulums swing, orbits circle.

Secondary Action: Primary rotation + secondary wobble. Spinner spins while slightly bouncing.

Timing:

Fast loops: 500-800ms (spinners, urgent indicators)
Medium loops: 1000-2000ms (pulsing, breathing)
Slow loops: 2000-4000ms (ambient, background)

Exaggeration: Minimal for loops - they're already attention-grabbing through repetition.

Solid Drawing: Loops must be seamless. Any jump between end and start destroys the illusion.

Appeal: Loops should be hypnotic, not annoying. Test at 30 seconds - still pleasant?

Squash & Stretch：轻微的缩放波动（0.98-1.02）能营造出自然的呼吸感。避免生硬的机械循环。

Anticipation：在循环周期中融入预备动作。在极值处短暂停顿后再反向运动。

Staging：循环动画应起到辅助作用，而非主导视觉。背景元素的振幅需保持柔和。

Straight Ahead vs Pose-to-Pose：设计可无缝循环的关键帧姿势。结束帧必须能流畅衔接起始帧。

Follow Through & Overlapping：多元素循环中，各元素处于不同相位。三个点以120°相位差进行脉冲动效。

Slow In/Slow Out：使用缓入缓出（ease-in-out）实现平滑振荡。线性运动看起来会很机械。

Arcs：圆周运动需遵循真实的弧线。Spinner旋转、钟摆摆动、轨道环绕都应如此。

Secondary Action：主旋转运动+次要摆动效果。Spinner在旋转的同时轻微弹跳。

Timing:

快速循环：500-800ms（Spinner、紧急指示器）
中等循环：1000-2000ms（脉冲、呼吸动效）
慢速循环：2000-4000ms（环境动效、背景效果）

Exaggeration：循环动画只需适度夸张——重复本身已足够吸引注意力。

Solid Drawing：循环必须无缝衔接。结束帧与起始帧之间的任何断层都会破坏动画的流畅观感。

Appeal：循环动画应具有催眠感而非恼人。测试30秒后，是否仍能保持舒适感？

Timing Recommendations

时长建议

Loop Type	Duration	Easing	Iterations
Spinner	600-800ms	linear (rotation)	infinite
Pulse	1500-2000ms	ease-in-out	infinite
Skeleton Shimmer	1500ms	ease-in-out	infinite
Typing Dots	1400ms	ease-in-out	infinite
Breathing	3000-4000ms	ease-in-out	infinite
Floating	3000-5000ms	ease-in-out	infinite

循环类型	时长	缓动效果	重复次数
Spinner	600-800ms	linear（旋转）	infinite
脉冲	1500-2000ms	ease-in-out	infinite
骨架屏闪烁	1500ms	ease-in-out	infinite
打字效果圆点	1400ms	ease-in-out	infinite
呼吸动效	3000-4000ms	ease-in-out	infinite
漂浮动效	3000-5000ms	ease-in-out	infinite

Implementation Patterns

实现模式

css

/* Smooth spinner */
.spinner {
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Organic pulse */
.pulse {
  animation: pulse 2000ms ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

/* Staggered dots */
.dot {
  animation: bounce 1400ms ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 160ms; }
.dot:nth-child(3) { animation-delay: 320ms; }

css

/* Smooth spinner */
.spinner {
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Organic pulse */
.pulse {
  animation: pulse 2000ms ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.8; }
}

/* Staggered dots */
.dot {
  animation: bounce 1400ms ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 160ms; }
.dot:nth-child(3) { animation-delay: 320ms; }

Performance Rules

性能规则

Use
```
transform
```
and
```
opacity
```
only - no layout properties
Add
```
will-change: transform
```
for loops over 1 second
Pause off-screen loops with Intersection Observer
Respect
```
prefers-reduced-motion
```
- reduce or stop loops

仅使用
```
transform
```
和
```
opacity
```
属性——不要使用会触发布局的属性
对于时长超过1秒的循环，添加
```
will-change: transform
```
使用Intersection Observer暂停屏幕外的循环动画
尊重
```
prefers-reduced-motion
```
设置——减少或停止循环动画

Seamless Loop Formula

无缝循环公式

For breathing/pulsing:

0%, 100%

keyframes must be identical. Use

alternate

direction for simpler ping-pong effects.

对于呼吸/脉冲动效：

0%, 100%

关键帧必须完全一致。对于简单的乒乓效果，可使用

alternate

方向。