My animation disapears because of opacity

November 6, 2021

Why is my animation disapearing, I’ve tried to set opacity:1!important, I’ve tried to change to visibility hidden and visible it still gives the same result. My div should be hidden for two sec, (animation-delay) then my animation runs perfectly. Then it disappers everytime…. even tho it’s at opacity 1, I dont get it, am I some kind of idiot? 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>

>Solution :

Add animation-fill-mode: forwards; now your animation is running and just going back to its initial state.

.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);
  }
}