Tengo un div que se mueve hacia arriba y hacia abajo en la página. Quiero que desaparezca después de que la animación se haga así https://diamondcryptodeal.com/en/ Esto es lo que he hecho hasta ahora, pero aún no desaparecerá. Usé Jquery para tratar de eliminar el div por completo después de que se realizó la animación. Gracias.

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