本文详解如何通过 css 动画让红色方块从完全不可见、超大缩放（scale(10)）状态平滑缩放到原始尺寸（scale(1)）并淡入显示，避免初始闪现，关键在于结合 `opacity: 0` 初始态与 `animation-fill-mode: forwards` 控制动画终态。
要实现一个“流式入场”效果——即元素在动画开始前完全不可见，随后从远端放大并淡入至正常尺寸——核心思路是：分离视觉可见性（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 结构保持简洁：
这样，红色方块将在页面加载 1 秒后，从近乎不可见的巨大尺寸平滑缩放、淡入至标准 200×200 像素，实现专业级的“流式入场”动效。
