微信订阅号：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上下载源码（在官网也能找到）~
<!-- 引入 -->
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
</head>
我用一个div简单举个小例子
<!-- HTML代码 -->
<div id="box"></div>
给这个div一点样式，让它能够显示出来。
/* CSS代码 */
#box {
width: 100px;
height: 100px;
background: paleturquoise;
margin: 100px auto;
}
/* 样式是随便写的，只要能用肉眼看到这个div就行 */
微信订阅号：Rabbit_svip
在这个基础上，直接给id为box的div加类就行了。
首先要有一个基础类 “animated” ，如果没这个类，其他都是无用功！
然后在后面再加一个动画类，就能实现动画效果了（这里我用那个了bounce这个动画）。
<!-- HTML代码 -->
<div id="box" class="animated bounce"></div>
这里加了 “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例子。
<!-- HTML代码 -->
<div id="box"></div>
<button id="btn">btn</button>
<!-- 设置了一个div和一个按钮 -->
/* 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;
}
网友评论