微信小程序使用animate.css实现炫酷的动画效果

动画演示效果可以在官网查看，官网进不去的话也有中文版，演示效果与官网一致。

 官网地址：Animate.css | A cross-browser library of CSS animations.

 

 中文版地址：Animate中文网 – Animate安装、Animate使用、Animate下载

 

 animate.css文件获取方式：

1.npm导包

在终端输入：

npm install animate.css

默认获取最新版,也可以指定版本：

npm install animate.css@3.7.2

2. 直接复制

网页版：https://cdn.bootcss.com/animate.css/4.1.1/animate.min.css

github地址：animate.css/animate.css at main · animate-css/animate.css (github.com)

3.也可在下方CSDN链接直接下载
https://download.csdn.net/download/jnsbdb/86404668https://download.csdn.net/download/jnsbdb/86404668

找到包下的animate.css文件，将后缀改为wxss,放到utils文件夹下

在app.wxss文件导入animate.wxss就可以使用了

 注意要将animate.wxss文件下的:root改为page

 app.wxss

@import "./utils/animate.wxss";

 wxml

<view class="animate__animated animate__bounce animate__infinite" ></view>

animate__animated固定不变

animate__bounce表示动画类别

animate__infinite表示动画无限循环

注意：如果是4.0版本之前则不用加animate__前缀，即：

<view class="animated bounce infinite" ></view>