css - 我正在尝试从 css 每隔 5 秒自动旋转图像

Question

我正在尝试从 css 每隔 5 秒自动旋转图像。我的代码有效，但仅在悬停时有效，但我想要悬停和不悬停。到目前为止，我所做的如下。

.circle-border:hover {
-webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    transform: rotate(720deg);
    transition: transform 0.9s ease 0.3s;
}

<div class="circle-border">
        <img class="img-circle" src="images/web.jpg" alt="service 1">
</div>

提前致谢

Answer 1

您需要的是动画，而不是过渡。

CSS Animations @ MDN

这个动画有 6 秒长，但旋转只发生在持续时间的最后 1/6 ....这让我们每 5 秒有一个 1 秒的动画。

div {
  width: 100px;
  height: 100px;
  background: #663399;
  margin: 1em auto;
  -webkit-animation-name: spinner;
  animation-name: spinner;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
@-webkit-keyframes spinner {
  83.33% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spinner {
  83.33% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<div></div>