CSS摆动/抖动效果 [英] CSS wiggle/shake effect

问题描述

我打算做的效果：
-摆动几次，然后停止摆动。定期执行此行为，直到鼠标悬停为止。
-悬停时，摆动运动完全停止。
-所有过渡都很顺利。
我尝试使用-webkit-animation关键帧，但是使用-webkit-animation-timing-function来缓解鼠标悬停时的过渡不起作用。
而且，我迷失在如何实现以下周期运动：摆动，停止和再次摆动。
如果您能指出正确的方向，我将不胜感激。

The effect I am intend to do: -wiggle a few times and stop wiggling. Do this behaviour periodically until mouse is hover. -on hover, wiggle motion stops completely. -all transition are smooth out. I tried with -webkit-animation keyframes, but using -webkit-animation-timing-function to ease out the transition when the mouse is hovered didn t work. Also, i am lost on how to achieve the period motion of: wiggle, stop, and wiggle again. I would appreciate if you could point out in the right directions.

推荐答案

这是一个简单的摆动动画，当您将鼠标悬停在上面时便会停止。

Here is a simple wiggle animation that stops when you hover over it.

为了在摆动之间延迟，您可以只包含动画的空块……也就是说，在此期间什么都没有改变。在我的示例中，在0％和80％标记之间没有任何变化，并且摆动仅发生在最后20％（最终显示半秒钟）内。

In order to achieve a delay between wiggles, you can just include an "empty chunk" of the animation... that is, a period during which nothing changes. In my example, nothing changes between the 0% and 80% mark, and the "wiggle" only occurs in the last 20% (which ends up coming out to half a second).

@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。

Unfortunately, this doesn't account for "easing" back into the un-wiggled state if you hover over it mid-animation. Doing so might require a bit of JavaScript.

这篇关于CSS摆动/抖动效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！