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 Type	Duration	Easing	Delay Pattern
Toast/Alert	150ms	ease-out	None
Modal	250ms	ease-out	Content +50ms
Card/Item	200ms	ease-out	None
List Items	200ms	ease-out	Stagger 50ms
Page Section	300ms	ease-out	Stagger 100ms
Hero Content	400ms	ease-out	Stagger 150ms

元素类型	时长	缓动曲线	延迟模式
提示框/警告框	150ms	ease-out	无
模态框	250ms	ease-out	内容延迟+50ms
卡片/列表项	200ms	ease-out	无
列表项	200ms	ease-out	依次延迟50ms
页面区块	300ms	ease-out	依次延迟100ms
英雄内容	400ms	ease-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个。