本文详解如何通过 css 动画让红色方块从不可见、超大缩放（如 scale(10)）状态平滑缩放到原始尺寸（scale(1)）并淡入显示，避免初始闪现，核心在于正确设置 `opacity: 0` 初始态与 `animation-fill-mode: forwards` 配合关键帧控制。
要实现一个元素“从无到有、由大变小”地流畅流入容器（即视觉上像从远处飞入并缩放至正常大小），关键在于分离视觉可见性控制与变换动画逻辑。直接在 @keyframes 中使用 display: none 是无效的——CSS 动画无法对 display 属性做平滑过渡，它只能触发突变，导致动画卡顿或行为异常。
✅ 正确做法是：
- 在初始样式中将元素设为 opacity: 0（完全透明）且保持正常文档流位置；
- 动画起始帧（0%）立即设为 opacity: 1 + transform: scale(10)（大幅缩放+可见），制造“从巨大透明态突然显现并收缩”的入场效果；
- 结束帧（100%）设为 opacity: 1 + transform: scale(1)（还原原始尺寸），若需最终保持可见，不要在结尾设 opacity: 0（原答案中结尾 opacity: 0 实际会导致消失，与“流入后停留”需求矛盾，需按场景调整）。
以下是修正后的标准实现（支持现代浏览器，已移除冗余 -webkit- 前缀，推荐使用）：
.container .box {
width: 200px;
height: 200px;
background-color: red;
margin: 0 auto;
opacity: 0; /* 初始完全隐藏，但占位 */
transform: scale(1); /* 确保 transform 基准清晰 */
}
.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);
}
100% {
opacity: 1;
transform: scale(1);
}
}<div class="container"> <div class="box"></div> </div>
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- animation-fill-mode: forwards 不可省略：它确保动画结束后元素保持 100% 关键帧的样式（即 scale(1) 和 opacity: 1），否则动画一结束就会回退到初始 opacity: 0 状态；
- 避免混用 display 与动画：display 不是可动画属性，任何尝试（如 display: none → block）都会中断渲染流程，造成闪烁或跳变；
- 性能优化建议：对 transform 和 opacity 动画 GPU 加速友好，无需额外 will-change；若需更高性能，可添加 transform: translateZ(0) 或 will-change: transform, opacity（仅在复杂场景下启用）；
- 可扩展性提示：如需添加入场位移（如从右上方滑入），可在 transform 中叠加 translateX() 和 translateY()，例如 transform: translate(-50%, -50%) scale(10)。
总结：流畅的“流入式”动画 = 初始隐藏（opacity: 0） + 动画起始瞬间显形放大（opacity: 1, scale(N)） + 动画结束精准还原（scale(1), opacity: 1） + fill-mode: forwards 锁定终态。掌握这一模式，即可复用于按钮浮现、卡片加载、模态框入场等各类 UI 动效场景。
