使用 css animation 和 jquery 在页面上下移动后如何使 div 消失

Question

I have a div that moves up and down the page. I want it to disappear after animation is done like this https://diamondcryptodeal.com/en/ This is what i have done so far but it still wont disappear. I used Jquery to try to remove the div entirely after animation is done. Thanks.

html

<div class="earner-notification" id="earner-notification">
                <div class="row">
                  <div class="col">
                    <span style="margin-bottom: 12px;"><img src="images/arts/earnerlogo.jpg" class="bitcoin-earner img-fluid w-25 rounded-pill" alt="">
                    </span>
                 </div>
                  <div class="col">
                    <span style="position: absolute;left:25%; top:10%; font-family:Georgia, 'Times New Roman', Times, serif;  font-size: 0.7rem;">
                      <span class="lead fw-bold:250;">Earner</span> 
                      <br/>Mohammed from <span style="text-transform: capitalize;">INDIA</span> 
                      just earned <span class=" fw-bold:300;">$850.</span></span>
                  </div>                
                </div>
                   
              </div>

css

@keyframes earner {
  0% {
    transform: translateY(-100%);
    opacity: 1;
  }

  50% {
    transform: translateY(100%);
    opacity: 1;
  }

  100% {
    transform: translateY(-100%);
    opacity: 0;
    display: none;
  }
  
}
.earner-notification{
  position: absolute;
  left: 0;
  top: 125px;
  font-size: 1rem;
  width: 15rem;
  height: 5rem;
  margin-left: 1.5rem;
  border: 2px solid #FF7F50;
  
   border-radius: 9px;
   background-color: #000000;
   color: $white;
   animation: earner 10s ease;
  
   //animation-name: earner;
  //animation-duration: 10s;
  //animation-delay: -2s;

  //animation-iteration-count: 3;
}

.bitcoin-earner{
  position: absolute;
  top: 25%;
  left: 2%;
}

jquery

$('.earner-notification').bind('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(e) { $(this).remove(); });

Answer 1

Try this:

@keyframes earner {
  0%{
    opacity: 1;
    transform: rotateX(90deg);
  }
  50%{
    opacity: 0.5;
    transform: rotateX(0deg);
  }
  100%{
    display: none;
    opacity: 0;
    transform: rotateX(90deg);
  }
}