title: Trigger CSS Animation on div click
body: <p>I am trying to get a series of <strong>li</strong> to animate when a div is clicked.
  I have tried a few different things but I am not able to get it to work.
  For example I have looked at toggling .animate based on a MDN article but this didn't work.
  <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationstart_event</a></p>
  <p>On StackOverflow another user had this problem and a user suggested using controlAnimation()</p>
  <p>The result must be repeatable every time the div is clicked.</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>document.getElementById("clickable").addEventListener("click", controlAnimation);
  
  
  function controlAnimation() {
     document.getElementById('menu-main-menu').style.animation="fadeInMenu";
     
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#menu-main-menu li {
      
    border-bottom: solid 1px #999;
    opacity: 0;
    -webkit-animation: fadeInMenu 0.5s 1;
    animation: fadeInMenu 0.5s 1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
  }
  
  #menu-main-menu li:nth-child(5n+1) {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
  }
  
  #menu-main-menu li:nth-child(5n+2) {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
  }
  
  #menu-main-menu li:nth-child(5n+3) {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
  }
  
  #menu-main-menu li:nth-child(5n+4) {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
  }
  
  #menu-main-menu li:nth-child(5n+5) {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
  }
  
  
  
  /* Animation steps */
  
  @-webkit-keyframes fadeInMenu {
    0% {
      opacity: 0.0;
      transform: translateY(16px);
    }
    100% {
      opacity: 1.0;
    }
  }
  
  @keyframes fadeInMenu {
    0% {
      opacity: 0.0;
      transform: translateY(16px);
    }
    100% {
      opacity: 1.0;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="clickable" &gt;Click me&lt;/div&gt;
  &lt;br&gt;
  &lt;ul id="menu-main-menu"&gt;
  &lt;li&gt;Item 1&lt;/li&gt;
  &lt;li&gt;Item 2&lt;/li&gt;
  &lt;li&gt;Item 3&lt;/li&gt;
  &lt;li&gt;Item 4&lt;/li&gt;
  &lt;li&gt;Item 5&lt;/li&gt;
  
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>