animate.css

动画转场效果对节目的重要性毋庸置疑。转场动画的流畅度确实能给人一种节目很流畅的感觉。Ios系统基本上不管什么操作都喜欢用动画转场，所以给人的感觉超级流畅！在项目中，我们经常被要求在元素切换和界面过渡中加入动画过渡效果。但是自己的超级麻烦。有一个强大的动画库不是很好吗？

什么是animate.css

Animate.css是一个css3动画库，包含76种动画，而且是完全免费开源的。可以从github下载，使用方法非常简单。因为它是一个css库，它完全兼容H5，小程序和单应用程序。

官方网站:https://daneden.github.io/animate.css/.

gith nb:https://github.com/daneden/animate.css

安装方法

Npm安装:

npminstallanimation . CSS-se yarn安装:

Yarnadanimate。CSS cdn简介

https://cdnjs . cloud flare . com/Ajax/libs/animate . CSS/3 . 7 . 0/animate . min . CSS的介绍方法在不同的环境下，介绍方法略有不同，但基本相同。

在使用webpack的h5中引入上是把它引入到 main.js 中。微信小程序的开发环境中，将下载好的 animate.css 引入到 app.wxss中即可,引入之前别忘了将后缀改为.wxss eg: @import ‘./animate.wxss’; 。在uni-app中引入也非常简单，将下载好的 animate.css 引入到 App.vue中即可。

使用方法

animate.css的使用非常简单，因为它将不同的动画绑定到不同的类，所以如果要使用任何动画，只需要将通用类animated和对应的类添加到元素中即可。

所以，如果我们想在不同的动画之间切换，我们只需要用css添加需要动画的元素，删除不同的类。

以下是animate.css提供的动画类列表:

当然，除了动画，我们还可以在动画元素中添加其他类来控制动画执行时间、无限循环、延迟时间等等。

至于具体功能，推荐你看官方文档，其官网可以预览各种动画类的具体效果；https://daneden.github.io/animate.css/。