title: How to animate or use transitions on a message pop up with javascript and css?
body: <p>I currently have the message displaying and disappearing as I want but the transition isn't working, This is what I tried. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const alertMsg = document.querySelector('.alert');
  contactForm.addEventListener('submit', formSubmitted);
  
  
  function formSubmitted(e) {
    //other stuff
  
    alertMsg.style.display = 'block';
    setTimeout(() =&gt; {
      alertMsg.style.display = 'none';
    }, 5000);
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.alert {
    transition: all 0.5s ease-out;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="alert"&gt;Your message has been sent, I will get back to you as soon as possible.&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The message just instantly disappears and reappears, how can I use the transition currently to make some sort of animation? </p>
  
  <p>This is my first question so sorry if I missed any information out, I will add any more if needed. Thanks</p>