1.下载

使用npm下载animation.css：

npm install animation.css -g

注：-g是全局下载，如果需要把package的信息写入package.json文件的话，可以使用-save参数，参考官网：

当然，这样下载安装的前提是你已经配置好了nodejs环境，如果还没有配置好，可以参考：

blog.csdn.net/qq_51235856…

这篇文章中的nodejs安装配置部分：

或者也可以直接从该网址下载：gitee.com/wu-haoyi/to…

2.配置

将下载下来的animate.css放入微信小程序的某一目录下（根据自己情况而定）

并改名为animate.wxss

之后将其中的 :root 修改为 page ：

保存即可

然后可以在app.wxss中导入该文件：

或者你哪一个页面的样式需要使用animate.css，就在哪一个页面的wxss文件中import也可

在app.wxss中导入即是全局样式，所有页面均可使用

接下来我们就可以使用了

3.使用

目前的版本是v4.1.1，样式前缀为animate__animated

我们想要使用的动画效果的class名可以从官网找到：

选中你想要的样式，复制其class name即可

示例：

使用bounce动画效果，则

class="animate__animated animate__bounce"

4.一个demo

index.html：

<view class="hidden"></view>
<view class="pops animate__animated animate__jello">
<text>这是一个弹窗</text>
</view>

index.wxss：

.hidden{
position: absolute;
height: 100vh;
width: 50%;
z-index: -1;
background-color: gray;
}

.pops{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
width: 400rpx;
height: 400rpx;
background-color: white;
}

修改弹窗样式：

即可看到不同的弹窗动画效果

微信小程序使用animation.css

1.下载

2.配置

3.使用

4.一个demo