title: How to use animation on a rotated element in CSS
body: <p>I have an div element that is rotated 90 degree by default. Now I want to apply animation effect on it on click. Is there a way to preserve the rotation effect throughout the life of animation?</p>
  
  <p>When I use animation, I was able to define the CSS effect on 0%, 50%, and 100% of the life of animation. But the element has a random chance of rotating 90 or -90 degrees, I cannot put a hardcoded rotation within the keyframes definition.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="solid clock ani"&gt;&amp;#10004;&lt;/div&gt;
  &lt;div class="solid counterclock ani"&gt;&amp;#10004;&lt;/div&gt;
  </code></pre>
  
  <pre class="lang-css prettyprint-override"><code>.solid {width:50px; height:50px}
  .clock {transform: rotate(90deg)} /*clock-wise rotation*/
  .counterclock {transform: rotate(-90deg)} /*counter-clock-wise rotation*/
  .ani {animation popit 0.2s linear 1 forwards} /*does not preserve rotation!!*/
  
  @keyframes popit{
      0% {
        width: 0%;
        height: 0%;
        opacity: 0;
        border-radius: 50%;
      }
      50% {
        width: 150%;
        height: 150%;
        transform: translateX(-10%);
        border-radius: 50%;
        opacity: 1;
      }
      100% {
        width: 100%;
        height: 100%;
        opacity: 1;
      }
    }
  </code></pre>
  
  <p>I would like to see if there is a way to dynamically add the rotation into the keyframes css definition above</p>
  
  <p>With the code above, the element would rotate back to the original position, apply the animation and then rotate 90deg.</p>
  
  <p>Ideally I want the element to stay rotated throughout the life of the animation.</p>