如何使用CSS实现动画执行完成后完全隐藏图片

CSS 动画默认的填充模式是none，也就是动画执行完成后，元素会立刻恢复到动画开始前的原始样式，不会保留动画最后一帧的属性值。你的代码里元素原始状态没有设置opacity: 0，所以动画跑完就会回到默认的不透明状态，看起来就是淡出后又重新显示。

核心配置：设置动画填充模式 #

给.splash-wrapper的动画规则添加animation-fill-mode: forwards即可，这个属性值的作用是让元素在动画结束后，始终保持最后一个关键帧定义的样式，也就是你写的opacity: 0状态，不会回退。
兼容旧浏览器的话需要补全前缀：

.splash-wrapper {
  /* 其他原有样式保留 */
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  -o-animation-fill-mode: forwards;
  -ms-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

更简洁的写法是直接把这个值合并到animation简写属性里，不用单独写：

animation: fadeIn 3s 3.1s forwards;
/* 顺序为 动画名 时长 延迟 填充模式，对应带前缀的属性也同步加forwards即可 */

关于visibility属性的配置 #

如果只需要视觉上隐藏，加完forwards之后靠opacity: 0已经能达到看不见的效果，但此时这个固定定位、z-index为9999的元素依然会覆盖在页面最上层，拦截所有鼠标、触摸交互，导致下面的页面内容无法点击。
如果要避免这个问题，有两个常用方案：

• 在动画的100%关键帧里加上visibility: hidden，让元素彻底不响应交互
• 监听animationend事件，动画结束后直接把元素设置为display: none或者从DOM中移除，这是开屏欢迎页场景下最常用的方案，能彻底释放这个节点占用的资源：

const splash = document.querySelector('.splash-wrapper');
splash.addEventListener('animationend', () => splash.remove());

• flex-flow: column nowrap末尾缺少分号，会导致后面的justify-content: center规则失效，图片不会垂直居中
• 重复定义了两次.splash-wrapper的animation-duration和animation-delay，属于冗余代码，可以合并到一处
• 动画命名是fadeIn（淡入）但实际实现的是淡出效果，命名和逻辑相反，不影响运行但不利于后续维护
• 背景色写的#86FF0000是8位HEX格式，前两位是透明度值，86对应的透明度大概是50%，如果要完全透明的背景建议直接写transparent，避免出现半透遮挡

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