官网:
介绍
安装
通过命令行
npm install animate.css --save
或
yarn add animate.css
然后通过项目里面的main.js引入
// main.js
import "animate.css";
通过cdn引入
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
使用
1、通过添加类使用
要使用动画的html标签,添加一个class,里面添加至少2个class
<h1 class="animate__animated animate__bounce">An animated element</h1>
animateanimated : 是必定要加的,表示使用动画
animatebounce:这是某个动画,你可以把这个换成其他动画,如闪两下就是animate__flash
这个动画效果,可以打开官网https://animate.style/,然后点击右侧的按钮查看效果,满意的可以直接点动画右边的复制按钮复制,复制出来就是animate__flash 这样的形式,方便你放入class
2、和vue 的 transition 结合使用
查看 https://www.yuque.com/yejielin/mypn47/qyoykq#j8bH0
设置
持续时间 animation-duration
.div1{
animation-duration: 2s; //设置动画持续时间2秒
}
延迟 animate-delay
.div1{
animate-delay: 2s; //设置动画延迟2秒后播放
}
重复次数 animate-repeat
.div1{
animate-repeat: 2; //设置动画重复播放2次
}