title: No Apply Animate CSS library effect to element
body: <p>I have a doubt when using the Animate CSS library I can apply it only once but I want it to apply another output effect when I click on the icon and that's where I don't get it.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const tocar = document.getElementsByClassName("tocar")[0];
  const btn = document.getElementById("mostrar")
  const cerrar = document.querySelector(".cerrar")
  
  
  function mostrar(){
    tocar.addEventListener("click",e=&gt;{
      btn.style.display="block";
    
    })
  }
  
  function  close(){
    cerrar.addEventListener("click", e =&gt;{
     btn.classList.add('animate__animated', 'animate__fadeOutDown')
     btn.style.display="none"
    })
    }
  
  mostrar()
  close()</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mostrar{
  display:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="es"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Jan Kelly | A Creative Digital Agency&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/&gt;
    &lt;link rel="stylesheet" href="/css/style.css"&gt;
      &lt;script src="iconosPro.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
     &lt;div class="container-video "&gt;
              &lt;span class="tocar"&gt;toca aquí &lt;/span&gt;
              &lt;p id="mostrar" class="animate__animated animate__zoomInDown"&gt;Hola mundo&lt;/p&gt;
              &lt;br&gt;
              &lt;span class="cerrar"&gt;cerrar&lt;/span&gt; 
        &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So if you realize the closure doesn't do the animation for me, it's supposed to call the selector and apply the new class to it but it doesn't work. can you help me please?</p>