Back to Details

transition-sequences

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Transition Sequence Animations

过渡序列动画

Apply Disney's 12 principles to choreographed multi-step motion.
将迪士尼12条动画原则应用于编排好的多步骤动效中。

Principle Application

原则应用

Squash & Stretch: Each element in sequence can compress/expand independently for organic feel.
Anticipation: Sequence starts with a setup phase. Brief pause or gather before motion begins.
Staging: Direct attention through the sequence. Most important element animates first or last.
Straight Ahead vs Pose-to-Pose: Plan keyframes for each step. Map the entire sequence before implementing.
Follow Through & Overlapping: Elements don't move in unison. Stagger starts by 50-100ms. Let motion cascade.
Slow In/Slow Out: Each step eases. The sequence overall should ease too - faster middle, slower ends.
Arcs: Transitions across space follow arcs. Page sliding left curves slightly, not linear slide.
Secondary Action: Primary transition + secondary details. Page slides while elements within fade/scale.
Timing:
  • Step overlap: 30-50% of previous step's duration
  • Total sequence: 300-800ms for UI, up to 1500ms for dramatic
  • Gap between steps: 0-100ms (overlap preferred)
Exaggeration: Sequence itself is exaggeration. Individual steps stay subtle.
Solid Drawing: Maintain spatial consistency. If A goes left, B should come from left.
Appeal: Sequences tell a story. Beginning, middle, end - satisfying resolution.
挤压与拉伸：序列中的每个元素可独立压缩/扩展，营造自然的视觉感受。
预备动作：序列以准备阶段开启。动效开始前加入短暂停顿或蓄力动作。
舞台呈现：通过序列引导用户注意力。最重要的元素优先或最后进行动画。
逐帧动画与关键帧动画：为每个步骤规划关键帧。在实现前先梳理完整的序列流程。
跟随动作与重叠动作：不同元素不同步运动。将启动时间错开50-100毫秒，让动效呈级联式展开。
缓入缓出：每个步骤都加入缓动效果。整个序列也需缓动——中间阶段速度快，首尾阶段速度慢。
弧线运动：空间过渡遵循弧线轨迹。页面向左滑动时带有轻微曲线，而非直线滑动。
次要动作：主过渡动效搭配次要细节。页面滑动的同时，内部元素进行淡入/缩放。
时间控制:
  • 步骤重叠：占上一步时长的30-50%
  • 总序列时长：UI场景为300-800毫秒，戏剧性场景最长可达1500毫秒
  • 步骤间隔：0-100毫秒（优先选择重叠方式）
夸张表现：序列整体可适当夸张，但单个步骤需保持简洁克制。
立体造型：保持空间一致性。如果元素A向左移动，元素B也应从左侧出现。
吸引力：序列需讲述完整故事。有开头、发展和结尾，带来满足感强的收尾。

Timing Recommendations

时间控制建议

Sequence TypeTotal DurationStep CountStep Overlap
Tab Change300ms250%
Page Transition500-600ms2-330%
Modal Open400ms340%
Wizard Step400ms250%
Onboarding800-1200ms4-630%
Dramatic Reveal1000-1500ms5-840%
序列类型总时长步骤数量步骤重叠比例
标签切换300ms250%
页面过渡500-600ms2-330%
模态框打开400ms340%
向导步骤400ms250%
引导流程800-1200ms4-630%
戏剧性展示1000-1500ms5-840%

Implementation Patterns

实现模式

css
/* Staggered sequence */
.sequence-item {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal 400ms ease-out forwards;
}

.sequence-item:nth-child(1) { animation-delay: 0ms; }
.sequence-item:nth-child(2) { animation-delay: 80ms; }
.sequence-item:nth-child(3) { animation-delay: 160ms; }
.sequence-item:nth-child(4) { animation-delay: 240ms; }

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page transition choreography */
.page-exit {
  animation: page-out 250ms ease-in forwards;
}

.page-enter {
  animation: page-in 300ms ease-out 200ms forwards;
}

@keyframes page-out {
  to { opacity: 0; transform: translateX(-30px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
css
/* Staggered sequence */
.sequence-item {
  opacity: 0;
  transform: translateY(20px);
  animation: reveal 400ms ease-out forwards;
}

.sequence-item:nth-child(1) { animation-delay: 0ms; }
.sequence-item:nth-child(2) { animation-delay: 80ms; }
.sequence-item:nth-child(3) { animation-delay: 160ms; }
.sequence-item:nth-child(4) { animation-delay: 240ms; }

@keyframes reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Page transition choreography */
.page-exit {
  animation: page-out 250ms ease-in forwards;
}

.page-enter {
  animation: page-in 300ms ease-out 200ms forwards;
}

@keyframes page-out {
  to { opacity: 0; transform: translateX(-30px); }
}

@keyframes page-in {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

Sequence Orchestration Formula

序列编排公式

javascript
// Calculate stagger delays
const items = document.querySelectorAll('.sequence-item');
const totalDuration = 600; // ms
const overlap = 0.4; // 40% overlap

items.forEach((item, index) => {
  const stepDuration = totalDuration / items.length;
  const delay = index * stepDuration * (1 - overlap);
  item.style.animationDelay = `${delay}ms`;
});
javascript
// Calculate stagger delays
const items = document.querySelectorAll('.sequence-item');
const totalDuration = 600; // ms
const overlap = 0.4; // 40% overlap

items.forEach((item, index) => {
  const stepDuration = totalDuration / items.length;
  const delay = index * stepDuration * (1 - overlap);
  item.style.animationDelay = `${delay}ms`;
});

Key Rules

核心规则

  1. Overlap steps 30-50% - no gaps, no simultaneous starts
  2. Total sequence under 800ms for functional UI
  3. Test at 0.5x speed to verify choreography
  4. Provide skip option for sequences over 500ms
  5. prefers-reduced-motion
    : instant state change, no sequence
  1. 步骤重叠30-50%——无间隔，也不同时启动
  2. 功能性UI的总序列时长控制在800毫秒以内
  3. 以0.5倍速测试，验证编排效果
  4. 时长超过500毫秒的序列需提供跳过选项
  5. prefers-reduced-motion
    ：直接切换状态，不播放序列动画