本文详解如何通过 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() + animation-fill-mode: forwards + 合理缓动函数。抛弃 display 操作，拥抱 opacity 与 transform 的硬件加速组合，才是高性能 CSS 动画的最佳实践。