Animate.css+js實現鼠標經過動畫效果

動畫效果可以參照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