时间戳

首页 > 解决方案 > 如何在每次迭代后暂停旋转图像动画？

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

问题描述

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

标签： javascriptcsscss-animationscss-transformsrotatetransform

解决方案

您可以将您的更改@keyframes为百分比。通过将transform: rotate(0deg)at设置为0% 和 25%，您将获得一个初始暂停，然后添加您的transform: rotate(0deg)at 75% 和 100%这将与您在动画开始时获得的初始暂停量相同。还将动画持续时间更改为1500 毫秒 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>

推荐阅读