html - 平滑的 CSS "Swinging"悬停时的动画循环

Question

您好，我在一个 div 中有一个图像，当该 div 悬停在上面时，我希望图像能够平滑地“摆动”。

我非常接近，我有图像摆动但我无法让它流畅地循环，它在动画完成一小段时间后暂停。

谁能帮我完成没有任何停顿的流畅循环的动画？

谢谢!

代码如下:

<div class="box">
  <img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg">
</div>

@keyframes swinging{
    0%{transform: rotate(0deg);}
    25%{transform: rotate(10deg);}
    75%{transform: rotate(-10deg);}
    100%{transform: rotate(0deg);}
}

.box:hover img {
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 2s ease-in-out forwards infinite;
    animation: swinging 2s ease-in-out forwards infinite;
}

还有 jsfiddle here

Answer 1

您可以通过将动画从 ease-in-out 更改为 linear 轻松实现这一点

@keyframes swinging{
    0%{transform: rotate(0deg);}
    25%{transform: rotate(10deg);}
    75%{transform: rotate(-10deg);}
    100%{transform: rotate(0deg);}
}

.box img {
  width: 300px;
  height: auto;
}

.box:hover img {
    -webkit-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-animation: swinging 2s linear forwards infinite;
    animation: swinging 2s linear forwards infinite;
}

<div class="box">
  <img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg"></div>

---

或者你可以尝试使用 cubic-bezier(P0, P1, P2, P3) 制作你自己的动画

@keyframes swinging {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.box img {
  width: 300px;
  height: auto;
}

.box:hover img {
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
  -webkit-animation: swinging 2s cubic-bezier(0.25, 0.25, 0.25, 0.5) forwards infinite;
  animation: swinging 2s cubic-bezier(0.25, 0.25, 0.25, 0.5) forwards infinite;
}

<div class="box">
  <img class="sp-icon-1" src="http://p4cdn4static.sharpschool.com/UserFiles/Servers/Server_19477/Image/anchor.jpg"></div>