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

Question

我有一张图片并为其添加了旋转动画，我希望它每 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%，您将获得初始的 pause，然后在 75% 和 100% 添加你的 transform: rotate(0deg) 这将与你在动画的开头。同时将动画持续时间更改为1500ms1.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>

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

How to make spinning image animation pause after each iteration?

javascript

css

rotatetransform

css-transforms

css-animations