Back to Details

entrance-animations

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Entrance Animations

入场动画

Apply Disney's 12 principles when bringing elements into view.
在让元素进入视野时应用迪士尼的12条动画原则。

Principle Application

原则应用

Squash & Stretch: Scale from 95% to 100% on entry. Elements feel elastic, not rigid.
Anticipation: Start slightly below/smaller than final position. A -10px offset before sliding up creates expectation.
Staging: Enter from the direction of user attention. New list items from the top, modals from center, sidebars from their edge.
Straight Ahead vs Pose-to-Pose: Use pose-to-pose. Define clear start state (invisible, offset) and end state (visible, positioned).
Follow Through & Overlapping: Child elements should lag slightly. Container enters first, content 50-100ms after.
Slow In/Slow Out: Use ease-out for entrances. Fast start, gentle landing: 
cubic-bezier(0, 0, 0.2, 1)
.
Arcs: Combine Y and X movement. Don't just fade - slide in on a subtle curve.
Secondary Action: Pair fade with scale. Opacity 0→1 while scaling 0.95→1 adds depth.
Timing:
  • Quick entrances: 150-200ms (toasts, tooltips)
  • Standard entrances: 200-300ms (modals, cards)
  • Dramatic reveals: 300-500ms (hero sections, page transitions)
Exaggeration: Scale can start at 0.8 for dramatic effect, 0.95 for subtle polish.
Solid Drawing: Maintain consistent 3D space. Elements entering from "behind" should scale up; from sides should slide.
Appeal: Entrances should feel welcoming. Avoid jarring pops - everything deserves an introduction.
挤压与拉伸（Squash & Stretch）：入场时从95%缩放至100%。让元素富有弹性，而非僵硬。
预备动作（Anticipation）：从略低于/小于最终位置的状态开始。入场前向上偏移-10px，营造预期感。
布局编排（Staging）：从用户注意力的方向入场。新列表项从顶部进入，模态框从中心进入，侧边栏从自身边缘进入。
逐帧动画 vs 关键帧动画（Straight Ahead vs Pose-to-Pose）：使用关键帧动画。定义清晰的起始状态（不可见、偏移）和结束状态（可见、定位完成）。
跟随与重叠动作（Follow Through & Overlapping）：子元素应稍作延迟。容器先入场，内容在50-100ms后再入场。
缓入缓出（Slow In/Slow Out）：入场时使用ease-out曲线。快速启动，平缓落地：
cubic-bezier(0, 0, 0.2, 1)
。
弧线运动（Arcs）：结合Y轴和X轴移动。不要仅使用淡入——沿微妙曲线滑入。
次要动作（Secondary Action）：将淡入与缩放结合。透明度从0→1的同时，缩放从0.95→1，增加层次感。
时长控制（Timing）:
  • 快速入场：150-200ms（提示框、工具提示）
  • 标准入场：200-300ms（模态框、卡片）
  • 戏剧性展示：300-500ms（英雄区块、页面过渡）
夸张效果（Exaggeration）：为达到戏剧性效果，可从0.8倍缩放开始；若要细腻质感，从0.95倍开始。
立体造型（Solid Drawing）：保持一致的3D空间感。从「后方」入场的元素应放大；从侧边入场的元素应滑动。
吸引力（Appeal）：入场效果应让人感到舒适。避免突兀的弹出——所有元素都应有一个「登场」的过程。

Timing Recommendations

时长建议

Element TypeDurationEasingDelay Pattern
Toast/Alert150msease-outNone
Modal250msease-outContent +50ms
Card/Item200msease-outNone
List Items200msease-outStagger 50ms
Page Section300msease-outStagger 100ms
Hero Content400msease-outStagger 150ms
元素类型时长缓动曲线延迟模式
提示框/警告框150msease-out无
模态框250msease-out内容延迟+50ms
卡片/列表项200msease-out无
列表项200msease-out依次延迟50ms
页面区块300msease-out依次延迟100ms
英雄内容400msease-out依次延迟150ms

Implementation Pattern

实现模式

css
.entering {
  animation: entrance 250ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes entrance {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
css
.entering {
  animation: entrance 250ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

@keyframes entrance {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

Stagger Formula

依次延迟公式

For multiple items: 
delay = index * 50ms
, cap at 500ms total sequence time.
Never exceed 5 items in a stagger sequence without user-initiated action.
对于多个元素：
延迟时间 = 索引 * 50ms
，总序列时长不超过500ms。
若无用户触发操作，依次延迟序列中的元素数量请勿超过5个。