动画效果可以参照animate.css
注：图片默认是不动的，当鼠标经过的时候才会动。
原理很简单--通过js，添加鼠标经过事件，鼠标经过时，把当前元素存放在“data-in”里的“swing”添加到class里，前提animated这个类一定要加上，要不然动画不起作用。
1、引入animate.css
<link href="https://cdn.bootcss.com/animate.css/3.5.1/animate.min.css" rel="stylesheet">
2、js代码
$(".hover_").on("mouseenter",function(e){ ???var This=$(this); ???var hin=This.attr("data-in"); ???This.addClass(hin); ???This.one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend‘, function(){ ???$(this).removeClass(hin); ???});});3、使用示例
<img ?class="animated hover_" data-in="swing" src="https://img.alicdn.com/tps/TB1_R_pKpXXXXauXXXXXXXXXXXX-406-396.png">
TIP：当然也可以自己编写动画的css
转自：https://www.jianshu.com/p/5f5658375660
Animate.css+js实现鼠标经过动画效果
原文地址：https://www.cnblogs.com/mankii/p/10369081.html