我打算做的效果： – 扭动几次,停止摆动.定期执行此操作,直到鼠标悬停. – 悬停时,摆动动作完全停止. – 所有过渡都很平稳. 我尝试使用-webkit-animation关键帧,但是
... . . 我打算做的效果：
– 扭动几次,停止摆动.定期执行此操作,直到鼠标悬停.
– 悬停时,摆动动作完全停止.
– 所有过渡都很平稳.
我尝试使用-webkit-animation关键帧,但是使用-webkit-animation-timing-function来缓解鼠标悬停时的转换并不起作用.
此外,我迷失了如何实现周期运动：摆动,停止和再次摆动.
如果你能指出正确的方向,我将不胜感激..
解决方法
. 这是一个简单的摆动动画,当你将鼠标悬停在动画上时会停止.
为了实现摆动之间的延迟,你可以只包括动画的“空块”……也就是说,没有任何变化的时期.在我的例子中,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.
. . .. ...