为什么我的CSS动画播放完成后消失，设置opacity:1!important也无效？

问题根因 #

CSS动画的animation-fill-mode属性默认值为none，代表动画执行结束后，元素会自动回退到动画启动前的初始样式状态。你给.welcome元素设置的初始样式是opacity:0，动画播放完成后就会回到这个状态，所以就算最后一帧关键帧设置了opacity:1也不会保留。

你之前的尝试无效的原因：

• 设置opacity:1!important如果写在.welcome基础样式中，会直接破坏前2秒隐藏的需求；如果写在其他位置，因为动画结束后元素脱离动画状态，初始opacity:0优先级更高，所以不会生效。
• 切换visibility属性的方案没有命中问题本质，自然不会生效。

解决方法 #

只需要给.welcome元素添加animation-fill-mode: forwards配置即可，这个属性的作用是让动画播放完成后，永久保留最后一关键帧的所有样式属性。

你也可以直接把动画相关属性合并简写，修改后的完整CSS代码如下：

.welcome{  
  /* 合并写法：动画名 时长 缓动函数 延迟时间 填充模式 */
  animation: drop 1.5s ease 2s forwards;
  transition: 1s;
  opacity:0;
  font-size: min(2.5vw, 32px);
  margin: auto;
  margin-top: -6%;
  position: absolute;
  text-align: center;
  left:0;
  right:0;
  padding-top: 2%;
  padding-bottom: 10%;
  background-color: #254C5B;
}
@keyframes drop{
  from {
    opacity:0; 
    transform: translateY(-80px);
  }
  to {
      opacity:1; 
      transform: translateY(0px);
  }
}

HTML代码无需修改，修改后效果完全符合预期：前2秒元素隐藏，2秒后开始播放下落动画，动画结束后元素保持可见状态不会消失。

内容的提问来源于stack exchange，提问作者Jack the man