本文详解如何通过 css 动画让一个元素（如红色方块）初始完全不可见，并以缩放放大效果“流入”容器，避免初始闪现；核心在于结合 `opacity: 0` 初始状态与 `animation-fill-mode: forwards` 控制动画前后样式。
要实现一个元素“从无到有、由小及大”地流畅流入页面（例如红方块从极小缩放值放大至正常尺寸），关键在于分离视觉可见性与几何变换的控制逻辑。直接在 @keyframes 中设置 display: none 是无效的——CSS 动画无法过渡 display 属性，且 display 变化会立即生效、破坏动画连贯性。
✅ 正确做法是：
- 初始状态设为 opacity: 0（完全透明），同时保持元素在文档流中占位；
- 动画起始帧（0%）设为 opacity: 1 + transform: scale(0.01)（或 scale(0.1) 等极小值），营造“从几乎不可见处浮现”的效果；
- 结束帧（100%）恢复为 scale(1)，完成“流入”；
- 必须添加 animation-fill-mode: forwards，确保动画结束后保留最终样式（即 scale(1) 和 opacity: 1）。
以下是优化后的完整代码示例：
.container .box {
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
opacity: 0; /* 初始完全隐藏，但保留布局空间 */
transform: scale(0.01); /* 避免初始微小闪烁，强化“从无到有”感 */
}
.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; /* 关键！锁定动画结束后的 final state */
}
@keyframes flowIn {
0% {
opacity: 1;
transform: scale(0.01);
}
70% {
opacity: 1;
transform: scale(1.05); /* 轻微过冲增强动效张力 */
}
100% {
opacity: 1;
transform: scale(1);
}
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要使用 -webkit- 前缀独占写法（如 @-webkit-keyframes），现代浏览器已全面支持标准 @keyframes；仅在需兼容极旧 iOS Safari（
- transform: scale() 的基准点默认为元素中心（transform-origin: 50% 50%），如需从左上角缩放，可加 transform-origin: top left；
- 若希望元素真正“不占布局空间”（而非仅透明），可用 visibility: hidden 替代 opacity: 0，但注意 visibility 同样不可动画，因此仍需配合 opacity 实现渐变可见性；
- scale(10) 在原问题中过大，易导致渲染模糊或性能下降，建议控制在 0.01–0.1 到 1 的合理区间。
总结：流畅“流入”效果 = 初始 opacity: 0 + transform: scale(
