Animate.css使用方法
谷梁俊楚
Animate.css使用方法
1.Animate.css安装
1.1用npm安装Animate.css
使用npm安装
$ npm install animate.css --save
1.2导入Animate.css文件
import 'animate.css';
官网搬运代码见另一个博客Animate.css
1.3用cdn直接添加到网页(方便)
大部分情况下用这种，比较方便
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
</head>
2.Animate.css的使用
Animate.css基本用法
之前的animate.css用法，只需要在class里加上animated +动画名称就可以使用了，但现在animate.css已经更新了官方文档，现在的使用方法如下:
<style>
#box{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
</style>
<body>
<div id="box" class="animate__animated animate__backInDown"></div>
//使用方法，在class里加上类animate__animated与任何动画名称一起添加到元素,此处为抖动效果
</body>
从Animate.css版本4开始，可以自定义属性来定义动画的持续时间、延迟、迭代
.animate__animated.animate__bounce {
--animate-duration: 5s;
}
/*添加类名属性样式，此设置可以改变动画的持续时间*/
:root {
--animate-duration: 800ms;
--animate-delay: 0.9s;
}
/*改变全局动画，--animate-delay是有多个模块时，模块出现之间的间隔时间*/
document.documentElement.style.setProperty('--animate-duration', '2s');
/*所有的动画需要两倍来实现*/
document.documentElement.style.setProperty('--animate-duration', '.5s');
/*所有动画需要一半时间来实现*/
animate__delay-2s
/*在类名后面添加延迟,延迟多少秒后执行范围为1~5,超出无效*/
<div class="animate__animated animate__bounce animate__faster">Example</div>
/*通过添加以下类名来改变速度*/
/*类名 默认速度*/
animate__slow 2s
animate__slower 3s
animate__fast 800ms
animate__faster 500ms
/*这些类名的速度也可以在style中自定义更改*/
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
/*迭代次数*/
3.Animate.css的一些动画
弹跳
<div class="animate__animated animate__bounce">Animate.css</div>
闪光
<div class="animate__animated animate__flash">Animate.css</div>
脉冲
<div class="animate__animated animate__pulse">Animate.css</div>
弹性
<div class="animate__animated animate__rubberBand">Animate.css</div>
摇晃X
<div class="animate__animated animate__shakeX">Animate.css</div>
摇晃Y
<div class="animate__animated animate__shakeY">Animate.css</div>
摇头
<div class="animate__animated animate__headShake">Animate.css</div>
摇摆
<div class="animate__animated animate__swing">Animate.css</div>
抖动
<div class="animate__animated animate__tada">Animate.css</div>
摇晃2
<div class="animate__animated animate__wobble">Animate.css</div>
果冻
<div class="animate__animated animate__jello">Animate.css</div>
心跳
<div class="animate__animated animate__heartBeat">Animate.css</div>
类似资料：