animate.css 是一个来自国外的 CSS3 动画库，它预设了抖动（shake）、闪烁（flash）、弹跳（bounce）、翻转（flip）、旋转（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多达 60 多种动画效果，几乎包含了所有常见的动画效果

安装

npm install animate.css --save

配置

在main.js引入

引入后在组件中直接就可以使用了

基本用法

安装 Animate.css 后，将类animate__animated与任何动画名称一起添加到元素（不要忘记animate__前缀！）写法如下图：

除了这种方式以外还可以直接使用keyframes这样你就不需要重新修改html的代码了

注意：在vue中动画的使用方式和普通的html略有不同

# 在vue组件中
<transition name="h1">
      <h1 v-show="show">transitionz组件</h1>
</transition>

# 在css中
# 进入动画
.h1-enter-active {
  animation: bounce 2s;
}
# 离开动画
.h1-leave-active {
  animation: backOutUp 2s;
}

vue2动画的使用方法可以在vue2的官方文档中查看

css自定义属性

从版本 4 开始，Animate.css 使用自定义属性（也称为 CSS 变量）来定义动画的持续时间、延迟和迭代。这使得 Animate.css 非常灵活和可定制。需要更改动画持续时间？只需在全局或本地设置一个新值。

/* 只更改单个动画 */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

/* 修改全部动画 */
# 使用vue-cli的同志需要将:root放在全局css样式下
:root {
/* 动画时长 */
  --animate-duration: 800ms;
  /* 延迟时间 */
  --animate-delay: 0.9s;
}

动画在两秒内完成

实用程序类

Animate.css 包含一些实用程序类以简化其使用。

您可以直接在元素的 class 属性上添加延迟，就像这样：

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

Animate.css 提供以下延迟：

类名	默认延迟时间
animate__delay-2s	2s
animate__delay-3s	3s
animate__delay-4s	4s
animate__delay-5s	5s
提供的延迟为 1 到 5 秒。您可以自定义它们，将--animate-delay属性设置为更长或更短的持续时间

:root {
  --animate-delay: 2s;
}

Slow, slower, fast, and Faster 类

您可以通过添加这些类来控制动画的速度，如下所示：

<div class="animate__animated animate__bounce animate__faster">Example</div>

班级名称	默认速度时间
animate__slow	2s
animate__slower	3s
animate__fast	800ms
animate__faster	500ms
该类animate__animated的默认速度为1s. 您还可以通过--animate-duration属性全局或本地自定义动画持续时间。这将影响动画和实用程序类。例子：

# 全局
:root {
  --animate-duration: 2s;
}

# 单独
.my-element {
  --animate-duration: 0.5s;
}

迭代类

可以通过同上的方式设置迭代次数

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

班级名称	默认迭代次数
animate__repeat-1	1
animate__repeat-2	2
animate__repeat-3	3
animate__infinite	infinite
与 delay 和 speed 类一样，animate__repeat该类基于--animate-repeat属性，并且默认迭代计数为1. 您可以通过将--animate-repeat属性设置为更长或更短的值来自定义它们：

.my-element {
  --animate-repeat: 2;
}

总结

本文介绍了在vue2中简单使用animate.css的方法。

详情请看官方文档