CSS 摆动/抖动效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38132700/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS wiggle/shake effect
提问by Sangam Chouchan
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.
我打算做的效果：-摆动几次并停止摆动。定期执行此行为，直到鼠标悬停。- 悬停时，摆动运动完全停止。-所有过渡都顺利完成。我尝试使用 -webkit-animation 关键帧，但是使用 -webkit-animation-timing-function 来缓和鼠标悬停时的过渡不起作用。此外，我对如何实现以下周期运动感到迷茫：摆动、停止和再次摆动。如果您能指出正确的方向，我将不胜感激。
回答by Woodrow Barlow
Here is a simple wiggle animation that stops when you hover over it.
这是一个简单的摆动动画，当您将鼠标悬停在它上面时会停止。
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).
为了实现摆动之间的延迟，您可以只包含动画的“空块”……也就是说，在此期间没有任何变化。在我的示例中，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>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.
不幸的是，如果您在动画中将鼠标悬停在它上面，这并不能解释“缓和”回到非摆动状态。这样做可能需要一些 JavaScript。
回答by The Dark Knight
Try one of the following:
尝试以下方法之一：
.class:hover {
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
https://css-tricks.com/snippets/css/shake-css-keyframe-animation/
https://css-tricks.com/snippets/css/shake-css-keyframe-animation/
or
Add This to your Script : <link type="text/css" href="https://rawgit.com/elrumordelaluz/csshake/master/dist/csshake.min.css"></link>
或将此添加到您的脚本中： <link type="text/css" href="https://rawgit.com/elrumordelaluz/csshake/master/dist/csshake.min.css"></link>
And Add a class to the element you want to shake
并为要摇晃的元素添加一个类
Full Documentation here: https://elrumordelaluz.github.io/csshake/
完整文档在这里：https: //elrumordelaluz.github.io/csshake/
