如何制作CSS动画使元素从隐藏状态平滑缩放进入视口的详细教程？

本文共计793个文字，预计阅读时间需要4分钟。

本文字面解释如下：

要实现一个“流式入场”效果——即元素在动画开始前完全不可见，随后从远端放大并淡入至正常尺寸——核心思路是：分离视觉可见性（opacity）与几何变换（transform）的起始控制，并确保动画前后状态无缝衔接。

首先，必须为元素设置初始不可见状态。仅依赖 display: none 无法与 transform 动画协同（因为 display 是离散属性，不支持过渡/动画），因此应使用 opacity: 0 配合 visibility: hidden（可选）作为初始样式：

.container .box { width: 200px; height: 200px; background-color: red; margin: 0 auto; opacity: 0; /* 关键：初始完全透明 */ /* 可选增强：防止点击穿透或布局干扰 */ /* visibility: hidden; */ }

接着定义动画，注意三点原则：
✅ 0% 关键帧需显式声明 opacity: 1 和 transform: scale(10) —— 这样动画第一帧就触发淡入和大幅缩小（视觉上是从巨大变小）；
✅ 中间过程保持 opacity: 1 确保全程可见，避免闪烁；
✅ 100% 回到 opacity: 0 并 transform: scale(1) 实现收尾淡出（若需最终保留可见，此处改为 opacity: 1 即可）；
✅ 必须设置 animation-fill-mode: forwards，使动画结束后保留 100% 的样式（否则会瞬间回退到初始 opacity: 0）。