【Animate.css】CSS动画库

微信订阅号：Rabbit_svip

本节目录

• Animate.css简介
• Animate.css基础用法
• Animate.css配合JS的用法和讲解
• 自定义Animate.css动画属性

---

【简介】

官网：Animate.css

微信订阅号：Rabbit_svip

看看来自官方的介绍：Animate.css 就像嗑水那么简单的CSS动画。

Animate.css是一个纯CSS动画库。

不兼容IE10以下的IE浏览器。

其他各大浏览器只要不是太旧的版本都能兼容。

所以说兼容性还是蛮强的。

官方给出了70多种动画特效。

这些动画其实大多数都不是很难，就是不愿意去写。所以这个CSS库真的很适合懒人（所有人）。

---

【基础用法】

首先下载（引入）Animate.css
可以到github上下载源码（在官网也能找到）~

我用一个div简单举个小例子

给这个div一点样式，让它能够显示出来。

/* CSS代码 */

#box {
  width: 100px;
  height: 100px;
  background: paleturquoise;
  margin: 100px auto;
}


/* 样式是随便写的，只要能用肉眼看到这个div就行 */

微信订阅号：Rabbit_svip

在这个基础上，直接给id为box的div加类就行了。

首先要有一个基础类 “animated” ，如果没这个类，其他都是无用功！
然后在后面再加一个动画类，就能实现动画效果了（这里我用那个了bounce这个动画）。

这里加了 “bounce” 这个动画效果

微信订阅号：Rabbit_svip

官方还给出很多效果，详情可查看
官方文档

微信订阅号：Rabbit_svip

除了动画效果，通常我们还有一些别的需求。比如动画循环执行、动画延时执行、动画执行时长。这些设置，Animate.css都给我们实现了。同样也只需配置几个类名，完全不用JS控制。

微信订阅号：Rabbit_svip

需要延时执行，官方给出上面几个类让我们选择。

• delay-2s：2秒后再执行动画
• delay-3s：3秒后再执行动画
• delay-4s：4秒后再执行动画
• delay-5s：5秒后再执行动画

微信订阅号：Rabbit_svip

上面这几个类是设置动画的执行时长。

• slow：用2秒执行完动画
• slower：用3秒执行完动画
• fast：用0.8秒执行完动画
• faster：用0.5秒执行完动画

最后，如果要设置无限重复执行动画，可用下面这个类

infinite

以上就是基本的设置。

---

【用JS控制】

上面的例子，都是在页面加载后立即执行动画。

有时候需要触发某些事件后才给出相应的动画。比如点一下按钮才会出现动画。这时官方也给出一个简单的JS例子。

btn

/* CSS代码 */
#box {
  width: 100px;
  height: 100px;
  background: paleturquoise;
  margin: 100px auto;
}

/* JS代码 *//* 定义animateCss函数（传过来的元素，动画名，回调函数） */

function animateCss(element, animationName, callback) {

  /* 获取传过来的 */
  const node = document.querySelector(element);
  
  /* 给元素加上基础类animated，还有动画类 */
  node.classList.add('animated', animationName);
  
  function handleAnimationEnd() {
  
    /* 移除基础类和动画类 */
    node.classList.remove('animated', animationName);
    
    /* 解除当前元素的事件监听 */
    node.removeEventListener('animationend', handleAnimationEnd);    /* 如果有回调函数，就执行回调函数 */
    
    if (typeof callback === 'function') callback();
  }
  
  /* 通过事件监听，当动画结束后，执行handleAnimationEnd函数 */
  node.addEventListener('animationend', handleAnimationEnd);
  
}
  
  /*点击按钮后触发animateCss函数*/
btn.onclick = function() {
  animateCss('#box', 'bounce')
};

这个例子用到了JS的事件监听：addEventListener

animationend：当CSS3动画结束后。
animationend是一个事件，就类似于onclick。

---

【自定义动画】

要修改或者添加一个动画类，或者添加一个参数类，可以参照Animate.css里的写法。在自己的css文件里写（不建议直接修改Animate.css文件）。

比如要修改动画默认执行时间

先找到animated这个类

微信订阅号：Rabbit_svip

我搜到在这里，然后把.animated这个类复制出来，放到自己的css文件里面

微信订阅号：Rabbit_svip

这里我把默认执行时间改成2秒。
这样就会覆盖Animate里的默认1秒。

因为不是直接改Animate.css这个库，所以其他页面是不会受到影响的。

如果需要添加其他属性，可以抄Animate.css的写法。
比如我需要一个300毫秒延时执行。可以这样写

/* CSS代码 */

.animated.delay-03s {
  -webkit-animation-delay: .3s;
  animation-delay: .3s;
}