由于不透明，我的动画消失了

Question

为什么我的动画消失了，我试过设置opacity:1!important，我试过改成visibility hidden and visible，结果还是一样。我的 div 应该隐藏两秒，(animation-delay) 然后我的动画运行完美。然后它每次都会消失......即使它的不透明度为 1，我还是不明白，我是不是有点白痴？ https://jsfiddle.net/padvyzk5/

.welcome{  
  animation: drop 1.5s ease;
  animation-delay: 2s;
  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);
  }
}

<h3 class ='welcome'> Welcome</h3>

Answer 1

添加 animation-fill-mode: forwards; 现在你的动画是运行并且只是回到它的初始状态。

.welcome{  
  animation: drop 1.5s ease;
  animation-delay: 2s;
  animation-fill-mode: 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);
  }
}

由于不透明，我的动画消失了

My animation disapears because of opacity

css

animation