animate.css

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

Github：GitHub - animate-css/animate.css: A cross-browser library of CSS animations. As easy to use as an easy thing.

当前是4.x，如果是用3.x 可访问下面链接：GitHub - animate-css/animate.css at a8d92e585b1b302f7749809c3308d5e381f9cb17

3.x 的可用 class：

bounce	flash	pulse	rubberBand
shake	headShake	swing	tada
wobble	jello	bounceIn	bounceInDown
bounceInLeft	bounceInRight	bounceInUp	bounceOut
bounceOutDown	bounceOutLeft	bounceOutRight	bounceOutUp
fadeIn	fadeInDown	fadeInDownBig	fadeInLeft
fadeInLeftBig	fadeInRight	fadeInRightBig	fadeInUp
fadeInUpBig	fadeOut	fadeOutDown	fadeOutDownBig
fadeOutLeft	fadeOutLeftBig	fadeOutRight	fadeOutRightBig
fadeOutUp	fadeOutUpBig	flipInX	flipInY
flipOutX	flipOutY	lightSpeedIn	lightSpeedOut
rotateIn	rotateInDownLeft	rotateInDownRight	rotateInUpLeft
rotateInUpRight	rotateOut	rotateOutDownLeft	rotateOutDownRight
rotateOutUpLeft	rotateOutUpRight	hinge	jackInTheBox
rollIn	rollOut	zoomIn	zoomInDown
zoomInLeft	zoomInRight	zoomInUp	zoomOut
zoomOutDown	zoomOutLeft	zoomOutRight	zoomOutUp
slideInDown	slideInLeft	slideInRight	slideInUp
slideOutDown	slideOutLeft	slideOutRight	slideOutUp
heartBeat

使用示例

<h1 class="animated infinite bounce delay-2s">Example</h1>

微信小程序的使用

这里使用4.0以上版本

从github中下载animate.css
小程序中引用
1. 修改文件名为animate.wxss，并放在根目录中
2. 进入animate.wxss，将.root 改为 page
3. 进入app.wxss中，首行添加 @import "animate.wxss"; (注意，后面一定要有分号，否则上传的时候，会出现说找不到animate.wxss的错误：message：Error: wxss 编译错误，错误信息：ErrorFileCount[1] path)

页面中使用-直接使用

<image class="btn animate__animated animate__heartBeat" mode="widthFix" src="" catchtap="onGotoDetail"></image>

页面中使用-通过data控制是否使用

<image class="btn {{animateForBtn}}" mode="widthFix" src="" catchtap="onGotoDetail"></image>

  data: {
    animateForBtn: ""
  },

  onLoad(){
    that.setData({
      animateForBtn: 'animate__animated animate__pulse animate__infinite'
    });

    that.setData({
      animateForBtn: ''
    });
  }

其他操作
1. 可以进行瘦身，删除-webkit 的 class，大神给出的正则，可批量替换 @-webkit.*(\n*[^@]*)\}

站点公众号