title: How to start and stop a CSS animation?
body: <p>I'm having a really hard time figuring out how to start and stop an animation and reverse it. </p>
  
  <p>I've assigned an animation to the <code>element.style.animation</code> property and from what I've read, I decided to use:</p>
  
  <pre><code>element.style.animationPlayState = "running";
  </code></pre>
  
  <p>to start it and: </p>
  
  <pre><code>element.style.animationPlayState = "paused";
  </code></pre>
  
  <p>to stop it. </p>
  
  <p>But it reports "running" all the time. </p>
  
  <p>Has anyone figured out how to start and stop an animation? </p>
  
  <p>I have a related question <a href="https://stackoverflow.com/q/58597057/8620333">here</a>. The related part is this block of code that I use to make animations start and stop: </p>
  
  <pre><code>var style = element.style;
  var animation = null;
  style.animationPlayState = "paused";
  
  if (style.animation) {
      animation = style.animation;
      style.animation = null;
      style.animationPlayState = "paused";
      element.addEventListener("animationend", function(event) {
          log("animation ended");
          element.removeEventListener("animationend", arguments.callee);
      });
  
      setTimeout(function() {
          style.animation = animation;
          style.animationPlayState = "paused";
          style.animationDirection = "reverse";
          style.animationPlayState = "running";
      }, 30);
  }
  </code></pre>
  
  <p>The goal is simple: </p>
  
  <ul>
  <li>Display a <code>div</code> when user presses button</li>
  <li><code>div</code> display is none, so set it to <code>display: block</code></li>
  <li>Fade in <code>div</code></li>
  <li>LATER - user presses a close button on <code>div</code></li>
  <li>Fade out <code>div</code></li>
  <li>After fade out set <code>display: none</code></li>
  </ul>
  
  <p>A method to do something like this:</p>
  
  <pre><code>fadeInElement(element)
  fadeOutElement(element) 
  </code></pre>