![7275569-525246037519e77d.png](https://i-blog.csdnimg.cn/blog_migrate/0473a7acae8b9f576ed28034cd647edc.webp?x-image-process=image/format,png)
本节目录
- Animate.css简介
- Animate.css基础用法
- Animate.css配合JS的用法和讲解
- 自定义Animate.css动画属性
【简介】
官网:Animate.css
![7275569-ced50563b6d1454f.png](https://i-blog.csdnimg.cn/blog_migrate/59584a6dcf3c72eea6082006deeeda6b.webp?x-image-process=image/format,png)
看看来自官方的介绍: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就行 */
![7275569-0c08f9bce20ac82d.png](https://i-blog.csdnimg.cn/blog_migrate/6d8fc7c38029226cb5e4dd468d139374.webp?x-image-process=image/format,png)
在这个基础上,直接给id为box的div加类就行了。
首先要有一个基础类 “animated” ,如果没这个类,其他都是无用功!
然后在后面再加一个动画类,就能实现动画效果了(这里我用那个了bounce这个动画)。
<!-- HTML代码 -->
<div id="box" class="animated bounce"></div>
这里加了 “bounce” 这个动画效果
![7275569-c68a9c8cb5a43015.gif](https://i-blog.csdnimg.cn/blog_migrate/99e3a110b6fc4c7612d4ad1ebd577363.webp?x-image-process=image/format,png)
官方还给出很多效果,详情可查看
官方文档
![7275569-ebaa5679bca0baee.png](https://i-blog.csdnimg.cn/blog_migrate/6c36806e105170076c14af4b6b70e87e.webp?x-image-process=image/format,png)
除了动画效果,通常我们还有一些别的需求。比如动画循环执行、动画延时执行、动画执行时长。这些设置,Animate.css都给我们实现了。同样也只需配置几个类名,完全不用JS控制。
![7275569-320ad6996c31a6fe.png](https://i-blog.csdnimg.cn/blog_migrate/c126b322f126fb6487ca9348ac6f84fc.webp?x-image-process=image/format,png)
需要延时执行,官方给出上面几个类让我们选择。
- delay-2s:2秒后再执行动画
- delay-3s:3秒后再执行动画
- delay-4s:4秒后再执行动画
- delay-5s:5秒后再执行动画
![7275569-debbcfe04a6c6964.png](https://i-blog.csdnimg.cn/blog_migrate/fdcf99c3e82e4adaf09c557c1e18daa0.webp?x-image-process=image/format,png)
上面这几个类是设置动画的执行时长。
- 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这个类
![7275569-4c0e8333929cf23d.png](https://i-blog.csdnimg.cn/blog_migrate/a87881c6ee59ab34590f38b4951cdea6.webp?x-image-process=image/format,png)
我搜到在这里,然后把.animated这个类复制出来,放到自己的css文件里面
![7275569-6da25469e62b5099.png](https://i-blog.csdnimg.cn/blog_migrate/bd6517d7325d9bdf1e2f34a91add56db.webp?x-image-process=image/format,png)
这里我把默认执行时间改成2秒。
这样就会覆盖Animate里的默认1秒。
因为不是直接改Animate.css这个库,所以其他页面是不会受到影响的。
如果需要添加其他属性,可以抄Animate.css的写法。
比如我需要一个300毫秒延时执行。可以这样写
/* CSS代码 */
.animated.delay-03s {
-webkit-animation-delay: .3s;
animation-delay: .3s;
}