在悬停上平滑CSS“摇摆”动画循环

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>

Answer 2

做了一些编辑。更改了%转换＆amp;动画。

＆＃13;

＆＃13;

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

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

.box:hover img {
  -webkit-transform-origin: 50% 0;
  /* for Safari and older Chrome */
  transform-origin: 50% 0;
  -webkit-animation: swinging 2s ease-in-out forwards infinite;
  animation: swinging 2s ease-in-out forwards infinite;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;