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

Question

我有一個默認旋轉 90 度的 div 元素。 現在我想在點擊時對其應用 animation 效果。 有沒有辦法在 animation 的整個生命周期中保持旋轉效果？

當我使用 animation 時，我能夠定義 CSS 對 animation 壽命的 0%、50% 和 100% 的影響。 但是該元素有隨機旋轉 90 度或 -90 度的機會，我不能在關鍵幀定義中放置硬編碼旋轉。

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

我想看看是否有辦法將旋轉動態添加到上面的關鍵幀 css 定義中

使用上面的代碼，元素將旋轉回原來的 position，應用 animation，然后旋轉 90 度。

理想情況下，我希望元件在 animation 的整個生命周期內保持旋轉。

Answer 1

考慮 CSS 變量到 append 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 屬性簡寫語法：

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

因此，在您的情況下，您可以將其定義為：

animation: popit 5s linear infinite forwards;