animate.css的使用方法总结

animate.css，不用多做介绍。这里主要写下我爱模板网在使用过程中常用的三种方法。为了便于理解，以给下面的图片加动画为例：

<img src="1.jpg" />

一、入场动画，即进入页面，就执行动画：
    1、要给需要执行动画的元素直接加上如rubberBand的动画对应的css：

<img src="1.jpg" class="animate__animated animate__rubberBand" />

二、利用js给它加上动画，这样可以配合js的事件进行交互：
    1、给图片加上“animate__animated”样式

<img src="1.jpg" class="animate__animated" />

    2、以点击为例：

document.querySelector('img').onclick = function(){
    this.classList.add('animate__rubberBand');
}

三、css实现鼠标浮动到图片上执行animate动画
    1、和上面一样，先给图片加上“animate__animated”样式

<img src="1.jpg" class="animate__animated" />

    2、在css中，给图片hover的时候，加上animate-name为“rubberBand”的样式：

img:hover{animation-name: rubberBand;}

    注意：
        1、当用css给元素加animate动画，是“rubberBand”，不是“animate__rubberBand”，不要前面的“animate__”，因为那是class类。而我们需要的是animate.css中定义的动画名称。
        2、不建议直接给执行动画的元素hover，而是给它父级，否则在元素执行动画过程中，有可能会离开鼠标，就会导致闪烁，上面的例子可以这么改：

<div>
    <img src="1.jpg" class="animate__animated" />
</div>

div:hover img{animation-name: rubberBand;}