entrance-animations

入场动画

应用迪士尼的 12 项原则，让元素进入视野。

原则应用

挤压与拉伸：进入时从 95% 缩放到 100%。让元素显得富有弹性，而非僵硬。

预备动作：从略低于或小于最终位置的状态开始。先偏移 -10px，再向上滑入，营造期待感。

舞台布局：从用户注意力所在的方向进入。新的列表项从顶部进入，模态框从中心进入，侧边栏从边缘进入。

连续动作与关键姿势：采用关键姿势动画。明确定义起始状态（不可见、有偏移）和结束状态（可见、位于目标位置）。

跟随动作与重叠动作：子元素应稍有延迟。容器先进入，内容在 50-100ms 后进入。

慢入与慢出：入场时使用 ease-out。快速开始，平缓落定：cubic-bezier(0, 0, 0.2, 1)。

弧线轨迹：结合 Y 轴和 X 轴的移动。不要只淡入——沿着细微的弧线滑入。

次要动作：将淡入与缩放结合。透明度从 0→1，同时缩放从 0.95→1，增加层次感。

时长：

• 快速入场：150-200ms（Toast、工具提示）
• 标准入场：200-300ms（模态框、卡片）
• 戏剧性展示：300-500ms（主视觉区块、页面过渡）

夸张处理：戏剧性效果可从 0.8 开始缩放，细腻润色则从 0.95 开始。

立体绘制：保持一致的 3D 空间感。从“后方”进入的元素应放大；从侧面进入的元素应滑入。

吸引力：入场应让人感到亲切。避免突兀地弹出——每个元素都值得一个登场。

时长建议

元素类型	时长	缓动	延迟模式
Toast/Alert	150ms	ease-out	无
模态框	250ms	ease-out	内容延迟 +50ms
卡片/项目	200ms	ease-out	无
列表项	200ms	ease-out	每项间隔 50ms
页面区块	300ms	ease-out	每项间隔 100ms
主视觉内容	400ms	ease-out	每项间隔 150ms

实现模式

.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);
  }
}

错开公式

对于多个项目：delay = index * 50ms，总序列时长最多为 500ms。

错开序列中的项目不得超过 5 个，除非由用户主动触发。