title: Toggle div with CSS animation and Javascript
body: <p>I'm trying to add an animation to a div the I'm im showing and hiding with a button click. I have the animation that I want but I don't know how to make a button in JS run that CSS animation.. Could someone please help me?</p>
  
  <p><a href="https://codepen.io/mattmcgilton/pen/JjjbGMB" rel="nofollow noreferrer">https://codepen.io/mattmcgilton/pen/JjjbGMB</a></p>
  
  <pre><code>.reveal-content {
      animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }
  
  
   @keyframes slide-in-fwd-center {
      0% {
        transform: translateZ(-1400px);
        opacity: 0;
      }
      100% {
        transform: translateZ(0);
        opacity: 1;
      }
    }
  </code></pre>
  
  <pre><code>var x = document.getElementById("reveal-content").style.display = "none";
  
  document.getElementById("btn-reveal").addEventListener('click', function() {
      var x = document.getElementById("reveal-content");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
  });
  </code></pre>