官网：

介绍

image.png
image.png

安装

通过命令行

  1. npm install animate.css --save
  3. 或
  5. yarn add animate.css

然后通过项目里面的main.js引入

  1. // main.js
  2. import "animate.css";

通过cdn引入

  1. <head>
  2.   <link
  3.     rel="stylesheet"
  4.     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  5.   />
  6. </head>

使用

1、通过添加类使用

要使用动画的html标签，添加一个class，里面添加至少2个class

  1. <h1 class="animate__animated animate__bounce">An animated element</h1>

animateanimated : 是必定要加的，表示使用动画
animatebounce：这是某个动画，你可以把这个换成其他动画，如闪两下就是animate__flash

这个动画效果，可以打开官网https://animate.style/，然后点击右侧的按钮查看效果，满意的可以直接点动画右边的复制按钮复制，复制出来就是animate__flash 这样的形式，方便你放入class
image.png

2、和vue 的 transition 结合使用

查看 https://www.yuque.com/yejielin/mypn47/qyoykq#j8bH0

设置

持续时间 animation-duration

  1. .div1{
  2.     animation-duration: 2s; //设置动画持续时间2秒
  3. }

延迟 animate-delay

  1. .div1{
  2.     animate-delay: 2s; //设置动画延迟2秒后播放
  3. }

重复次数 animate-repeat

  1. .div1{
  2.     animate-repeat: 2; //设置动画重复播放2次
  3. }