html 图片摆动效果,CSS摆动/摇动效果

这是一个简单的摆动动画,当你将鼠标悬停在动画上时会停止.

为了实现摆动之间的延迟,你可以只包括动画的“空块”……也就是说,没有任何变化的时期.在我的例子中,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;

}

wiggle,wiggle

不幸的是,如果你在动画中期将鼠标悬停在它上面,这并不能解释为“缓和”回到未摆动的状态.这样做可能需要一些JavaScript.