title: trigger CSS animations onlcick
body: <p>I have created an animation for an element on my page and it always runs when the page is refreshed but i would like the animation to play when an element is clicked. How would i go about doing this?</p>
  <p>CSS:</p>
  <pre><code>#login-or-signup-selection {
      display: flex;
      animation-name: test;
      animation-duration: 5s;
      position: relative;
      height: 70%;
  }
  
  @keyframes test {
      0% {top: 0px;}
      50% {top:300px}
      100% {top: 0;}
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;p id=&quot;clickMe&quot;&gt;Element to click&lt;/p&gt;
  </code></pre>