实用简单的css3动画效果插件animate.css学习记录

实用简单的css3动画效果插件animate.css学习记录

被同事种草了一款css3动画插件，非常简单且实用。还没用过的小伙伴赶紧点击官网尝试一下,10分钟就能学会还在等什么!
官方网站：https://daneden.github.io/animate.css/
点击下方的Download Animate.css就可以下载，下载后引入就可以开始使用。

使用方法非常简单，再class中添加animate，然后在上方的官方网站中选择喜欢的样式添加到类
例如：

第一个值animate必填 第二个值为选择的样式也是必填 第三个值为延迟执行的时间可选 第四个值为重复执行默认为执行一次。

如果想修改动画速度，为了产生不必要的麻烦，建议进入animate.css中查找以下代码

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

复制到HTML页面的头部style当中，然后修改即

然后就是添加事件然后进行动画（例如点击div后进行动画），方法很简单只需要把上面的第一步第二步添加到class中。
不过值得注意的是如果只添加class类页面只能进行一次动画，如果要解决应该有很多方法，我想到的方式代码如下：

或者直接刷新页面:

但是我感觉好像还是有些不完美。。。 如果每次点击先删除类，然后再添加看起来是最完美的，但是经过测试发现好像不能实现…不知道具体原因(难道是瞬间添加删除不可以 - -),如果有知道的大佬就麻烦留言告诉一下,小弟在此感谢了~