<分区>
我打算做的效果: - 摆动几次并停止摆动。定期执行此行为，直到鼠标悬停。 -悬停时，摆动 Action 完全停止。 -所有过渡都很顺利。 我尝试使用 -webkit-animation 关键帧，但使用 -webkit-animation-timing-function 来缓和鼠标悬停时的过渡不起作用。 此外，我不知道如何实现周期性运动:摆动、停止和再次摆动。 如果您能指出正确的方向，我将不胜感激。
<分区>
我打算做的效果: - 摆动几次并停止摆动。定期执行此行为，直到鼠标悬停。 -悬停时，摆动 Action 完全停止。 -所有过渡都很顺利。 我尝试使用 -webkit-animation 关键帧，但使用 -webkit-animation-timing-function 来缓和鼠标悬停时的过渡不起作用。 此外，我不知道如何实现周期性运动:摆动、停止和再次摆动。 如果您能指出正确的方向，我将不胜感激。
最佳答案
这是一个简单的摆动动画，当您将鼠标悬停在它上面时它会停止。
为了在摆动之间实现延迟，您可以只包含动画的“空 block ”……也就是说，一段没有任何变化的时间段。在我的示例中，0% 和 80% 标记之间没有任何变化，并且“摆动”仅发生在最后 20%(最终出现半秒)。
@keyframes wiggle {
0% { transform: rotate(0deg); }
80% { transform: rotate(0deg); }
85% { transform: rotate(5deg); }
95% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
h1.wiggle {
display: inline-block;
animation: wiggle 2.5s infinite;
}
h1.wiggle:hover {
animation: none;
}<h1 class="wiggle">
wiggle, wiggle
</h1>不幸的是，如果您在动画中间将鼠标悬停在它上面，这并不能解释“缓和”回到未摆动状态。这样做可能需要一些 JavaScript。
关于CSS 摆动/摇动效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38132700/