每次迭代后如何使旋轉圖像 animation 暫停？

Question

我有一張圖片並向其添加了旋轉 animation，我希望它每 4 秒旋轉一次，但我不知道如何使用 JS 或 CSS 來實現。

      <div class="row">
  <div id="spin-animation" class="column">
      <div class="container">
        <img src="mockups/to-do-list-img..jpg" class="image" alt="to-do-list-api">
        <a href="https://github.com"  target="_blank">
        <div class="overlay">
          <div class="text">Simple jQuery To Do List App</div>
        </div>
          </a>
      </div>
  </div>

/*Animations*/
#spin-animation {
    animation-name: spin-animation;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    
}

@keyframes spin-animation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

Answer 1

您可以將@keyframes更改為百分比。 通過將transform: rotate(0deg)放在0% 和 25% ，你會得到一個初始暫停，然后添加你的transform: rotate(0deg) at 75% 和 100%這將是相同數量的初始暫停你在 animation 的開頭得到。還將animation的持續時間更改為 1500 毫秒1.5 秒，這樣實際發生的50%的旋轉將足夠長以產生良好的效果。

您可以使用這些百分比和您的 animation 持續時間來獲得您想要的效果。

@keyframes spin-animation {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

 .row { overflow: none; } #spin-animation { animation-name: spin-animation; animation-duration: 1500ms; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes spin-animation { 0% { transform: rotate(0deg); } 25% { transform: rotate(0deg); } 75% { transform: rotate(360deg); } 100%{ transform: rotate(360deg); } }

 <div class="row"> <div id="spin-animation" class="column"> <div class="container"> <img src="mockups/to-do-list-img..jpg" class="image" alt="to-do-list-api"> <a href="https://github.com" target="_blank"> <div class="overlay"> <div class="text">Simple jQuery To Do List App</div> </div> </a> </div> </div>