如何通过动画实现图片先隐后显且仅运行一次？解决keyframes opacity延迟异常

直接设置animation-delay会导致延迟期间元素保持初始可见状态，核心问题在于默认初始opacity为1，且延迟阶段不会改变元素状态。以下是两种可行的解决思路：

方案一：初始透明+延迟触发出现动画 #

.image {
  opacity: 0; /* 初始状态完全透明，实现"先消失"的初始状态 */
  animation: fadeIn 2s 1s forwards; /* 1秒延迟后执行2秒出现动画，结束后保持最终状态 */
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

• opacity: 0确保图片一开始就不可见，彻底解决延迟期间可见的问题
• animation参数解析：fadeIn为动画名称，2s是动画持续时长，1s是延迟等待时间，forwards让动画结束后停在最后一帧（保持可见）
• 整体流程：初始透明（消失）→ 等待1秒 → 用2秒过渡到完全可见，且仅执行一次

方案二：单关键帧整合等待与出现阶段 #

如果不想单独设置初始opacity，可以在关键帧内分配时间占比，前半段保持透明模拟等待，后半段执行出现动画：

.image {
  animation: fadeInWithWait 3s forwards; /* 总时长3秒，包含1秒等待+2秒出现 */
}

@keyframes fadeInWithWait {
  0% { opacity: 0; } /* 初始透明 */
  33% { opacity: 0; } /* 前1/3时长（1秒）保持透明 */
  100% { opacity: 1; } /* 后2/3时长（2秒）过渡到可见 */
}

• 通过调整关键帧的百分比，可以灵活控制等待时长和动画速度
• 无需额外设置animation-iteration-count，默认即为单次执行

内容的提问来源于stack exchange，提问作者Navdeep Kaur