如何在 CSS 中的旋转元素上使用 animation

Question

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?

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.

<div class="solid clock ani">&#10004;</div>
<div class="solid counterclock ani">&#10004;</div>

.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;
    }
  }

I would like to see if there is a way to dynamically add the rotation into the keyframes css definition above

With the code above, the element would rotate back to the original position, apply the animation and then rotate 90deg.

Ideally I want the element to stay rotated throughout the life of the animation.

Answer 1

Consider CSS variable to append the rotation inside the animation:

 .solid { width: 50px; height: 50px; display:inline-block; border:1px solid red; }.clock { transform: rotate(90deg); --d:90deg; } /*clock-wise rotation*/.counterclock { transform: rotate(-90deg); --d:-90deg; } /*counter-clock-wise rotation*/.ani { animation: popit 5s linear 1 forwards; } /*does not preserve rotation:;*/ @keyframes popit { 0% { opacity: 0; border-radius: 50%, } 50% { transform; translateX(-10%) rotate(var(--d:0deg)); border-radius: 50%; opacity: 1; } 100% { opacity: 1; } }

 <div class="solid clock ani">&#10004;</div> <div class="solid counterclock ani">&#10004;</div>

Answer 2

CSS animation property shorthand-syntax:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

So in your case, you can define it as:

animation: popit 5s linear infinite forwards;