动画效果可以参照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