title: Is it possible to trigger animations only when button is clicked without using javascript using css or scss
body: <p>I want to trigger animations only when a button is clicked without JavaScript using css or scss.</p>
  <p>I tried to use :active, but the animation is also triggered even after the page is loaded.</p>
  <p>I think JavaScript may solve this problem but I want to know if it is possible to solve it only using css or scss.</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-css lang-css prettyprint-override"><code>#clickMe:active{
    animation: rotateAnimation 2s linear;
  }
  
  @keyframes rotateAnimation {
    from{transform:rotate(0deg);}
    to{transform:rotate(365deg);}
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;button id="clickMe"&gt;Click Me&lt;/button&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>