animate.css，不用多做介绍。这里主要写下我爱模板网在使用过程中常用的三种方法。为了便于理解，以给下面的图片加动画为例：
一、入场动画，即进入页面，就执行动画：
1、要给需要执行动画的元素直接加上如rubberBand的动画对应的css：
1 | <img src="1.jpg" class="animate__animated animate__rubberBand" /> |
二、利用js给它加上动画，这样可以配合js的事件进行交互：
1、给图片加上“animate__animated”样式
1 | <img src="1.jpg" class="animate__animated" /> |
2、以点击为例：
1 | document.querySelector('img').onclick = function(){ |
2 | this.classList.add('animate__rubberBand'); |
三、css实现鼠标浮动到图片上执行animate动画
1、和上面一样，先给图片加上“animate__animated”样式
1 | <img src="1.jpg" class="animate__animated" /> |
2、在css中，给图片hover的时候，加上animate-name为“rubberBand”的样式：
1 | img:hover{animation-name: rubberBand;} |
注意：
1、当用css给元素加animate动画，是“rubberBand”，不是“animate__rubberBand”，不要前面的“
animate__”，因为那是class类。而我们需要的是animate.css中定义的动画名称。
2、不建议直接给执行动画的元素hover，而是给它父级，否则在元素执行动画过程中，有可能会离开鼠标，就会导致闪烁，上面的例子可以这么改：
2 | <img src="1.jpg" class="animate__animated" /> |
1 | div:hover img{animation-name: rubberBand;} |
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
