如何在每次迭代后暂停旋转图像动画？答案

【问题标题】：How to make spinning image animation pause after each iteration?如何在每次迭代后暂停旋转图像动画？
【发布时间】：2021-10-17 03:00:33
【问题描述】：

我有一张图片并添加了一个旋转动画，我希望它每 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);
    }
}

【问题讨论】：

标签： javascript css css-animations css-transforms rotatetransform

【解决方案1】：

您可以将@keyframes 更改为百分比。通过将transform: rotate(0deg) 置于0% 和25%，您将获得一个初始暂停，然后将您的transform: rotate(0deg) 添加到75% 和 100% 这将与您在动画开始时获得的初始停顿量相同。还将 动画持续时间 更改为 1500ms 1.5 秒 所以 50 %轮换实际发生的时间会足够长以产生良好的效果。

您可以使用这些百分比和动画持续时间来获得您想要的效果。

@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>

【讨论】：