微信小程序开发-76种动画 animate.css

女爷i 2022-05-13 13:42 218阅读 0赞

**1、**微信小程序动画有自己的方法：[官方链接][Link 1]

但需要自己去写动画效果，比较麻烦。

**2、**本文介绍的是把animate.css这个非常棒的css库引入到小程序内使用。

animate.css包含76种动画，使用非常简单。[animate.css官网][animate.css]

**3、**由于小程序对代码大小限制比较大，所以删除了animate.css中 所有@-webkit-部分css，减少了一半体积

再把文件后缀名改为wxss，以后出来的百度小程序、支付宝小程序、今日头条小程序估计修改对应的后缀名就可以直接使用了。

点击此处下载：[http://nodejs999.com/animate.wxss][http_nodejs999.com_animate.wxss]

**4、**放到小程序代码中，然后@import到app.wxss文件中。

我项目是把animate.wxss文件放在utils文件夹下。

所以在app.wxss中加入 @import './utils/animate.wxss'; 即可。

就可以像animate.css一样使用了。

# [意外金喜的博客：http://blog.csdn.net/zzwwjjdj1][http_blog.csdn.net_zzwwjjdj1] #

更多小程序文章：[http://blog.csdn.net/zzwwjjdj1/article/details/79351547][http_blog.csdn.net_zzwwjjdj1_article_details_79351547]

扫描体验动画：在红包页和合作页，添加了很多动画。

![70][]

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/ui/animation/wx.createAnimation.html
[animate.css]: https://daneden.github.io/animate.css/
[http_nodejs999.com_animate.wxss]: http://nodejs999.com/animate.wxss
[http_blog.csdn.net_zzwwjjdj1]: http://blog.csdn.net/zzwwjjdj1
[http_blog.csdn.net_zzwwjjdj1_article_details_79351547]: http://blog.csdn.net/zzwwjjdj1/article/details/79351547
[70]: /images/20220504/d4135f3d6a86478f96571a4717e9ebad.png

发表评论取消回复

表情：

评论列表（有 0 条评论，218人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序加入购物车动画

微信小程序加入购物车动画 `*人狠话不多，直接代码搞起*` [点击github下载小demo,可以直接运行看效果，了解二次贝塞尔曲线的可以自己玩。][githu...

小鱼儿/ 2024年04月18日 17:36/ 0 赞/ 87 阅读

相关【微信小程序】小程序功能开发

![在这里插入图片描述][5c1311f37b4f4d35bc8b87d24d718292.jpeg_pic_center] 文章目录 1. 用户登录

快来打我*/ 2024年04月01日 09:16/ 0 赞/ 132 阅读

相关 wepy开发微信小程序使用animate动画插件

animate下载地址：[http://animateforless.com/][http_animateforless.com] 以less为例 1，下载文件夹[http

布满荆棘的人生/ 2023年06月30日 09:05/ 0 赞/ 23 阅读

相关微信小程序开发

uni-app之APP和小程序微信授权： [https://blog.csdn.net/qq\_15764943/article/details/85837552][ht

以你之姓@/ 2023年06月27日 05:54/ 0 赞/ 29 阅读

相关微信小程序开发

微信小程序是最近比较火的一个话题。那么什么是小程序？小程序是一种不需要下载安装即可使用的应用，它实现了应用「触手可及」的梦想，用户扫一扫或搜一下即可打开应用。也体现了「用完即走

骑猪看日落/ 2022年06月16日 09:40/ 0 赞/ 378 阅读

相关微信小程序开发效果：animation心跳动画

1、[微信小程序开发][Link 1]animation心跳动画 1.wxml文件中： 2.[html] view plain copy 3.<

港控/mmm°/ 2022年06月10日 07:55/ 0 赞/ 361 阅读

相关微信小程序开发-76种动画 animate.css

1、微信小程序动画有自己的方法：[官方链接][Link 1] 但需要自己去写动画效果，比较麻烦。 2、本文介绍的是把animate.css这个非常棒的css库引入到小程序内

女爷i/ 2022年05月13日 13:42/ 0 赞/ 219 阅读

相关 21.微信小程序之动画animation

从学校回来后，已经连上了9天的班。。白天写代码，晚上回家大佬组织在线测试。。。从双休→单休→不休 \[○･｀Д´･ ○\] 好了，说说动画吧。实现一个动画效果以开红包

灰太狼/ 2022年03月25日 09:36/ 0 赞/ 279 阅读

相关微信小程序：动画（Animation）

> 简单总结一下微信动画的实现及执行步骤。官方文档是这样说的：①创建一个动画实例 animation。②调用实例的方法来描述动画。③最后通过动画实例的 export 方法导出动

╰+攻爆jí腚メ/ 2022年03月18日 21:18/ 0 赞/ 420 阅读

相关微信小程序开发

微信小程序开发者指南 [https://developers.weixin.qq.com/miniprogram/dev/framework/][https_develope

心已赠人/ 2021年12月21日 00:43/ 0 赞/ 572 阅读