JQ触发animate.css动画

在上一篇文章《wow.js和animate.css为网页添加动态效果》中，简单介绍了两者结合做出令人养眼的页面动画效果。但是我希望鼠标触发animate.css的动画怎么弄呢？

animate.css里面已经内置了很多动画效果，我们只需要在需要添加动画的地方直接写上该动画的名称即可。

比如我们需要一个放大进场的动画效果，我们通过Animate.css官网查看，看到这个效果的动画名称是叫zoomIn，那么我们只需要在样式的动画里面添加这个名称就可以了。

假设我们网页上有这样一个元素：

<div clase="logo">xxxxx</div>

就是这个logo，我们希望它能实现放大进场的效果

那么我们在css样式表中，logo这个样式中添加个 animation 属性的动画就可以了，比如：

.logo{animation:zoomIn 5s infinite;}

这样就可以实现动画的效果了，当然，animation 属性是一个简写属性，它有六个动画属性设置：

animation: name duration timing-function delay iteration-count direction;

animation：none 0 ease 0 1 normal。

animation-name 规定需要绑定到选择器的 keyframe 名称。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。 

animation-timing-function 规定动画的速度曲线。 

animation-delay 规定在动画开始之前的延迟。 

animation-iteration-count 规定动画应该播放的次数。 

animation-direction 规定是否应该轮流反向播放动画。 

我们可能需要让这个logo不要那么快就结束动画，或者不要那么快开始动画，都可以在这个 animation 中设置好动画的属性。

比如我们需要它3秒后才开始动画，那么可以在样式中这么写：

.logo{animation:zoomIn 3s infinite;}

比如我们需要它3秒才播放完动画，我们可以在样式中这么写：

.logo{animation:zoomIn 3s 3s infinite;}

仔细调整样式名称和动画属性，就可以得到自己想要的动画效果了。