如何制作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）。

完整动画代码如下（已移除冗余 -webkit- 前缀，现代浏览器推荐使用标准语法）：

.container .box { width: 200px; height: 200px; background-color: red; margin: 0 auto; opacity: 0; /* 触发硬件加速，提升动画性能 */ will-change: transform, opacity; } .container .box { animation-name: flowIn; animation-duration: 1s; animation-timing-function: ease-out; /* 推荐 ease-out 营造“落定”感 */ animation-delay: 1s; animation-iteration-count: 1; animation-fill-mode: forwards; } @keyframes flowIn { 0% { opacity: 1; transform: scale(10); } 70% { opacity: 1; transform: scale(1.05); /* 微超调增强动感 */ } 100% { opacity: 1; transform: scale(1); } }

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• display: none 不能用于关键帧动画，它会导致元素在动画期间突然消失/出现，破坏连续性；
• 若需兼容旧版 Safari，请保留 -webkit- 前缀，但建议优先使用标准语法 + Autoprefixer 自动处理；
• scale(10) 数值可根据容器大小调整（如 scale(5) 更稳妥，避免溢出）；
• 如需“只入场不退场”，将 100% 的 opacity 改为 1，并确保 animation-fill-mode: forwards 生效；
• 添加 will-change: transform, opacity 可提示浏览器提前优化渲染层，提升动画流畅度。

最终 HTML 结构保持简洁：

<div class="container"> <div class="box"></div> </div>

这样，红色方块将在页面加载 1 秒后，从近乎不可见的巨大尺寸平滑缩放、淡入至标准 200×200 像素，实现专业级的“流式入场”动效。