微信小程序,一个简单的css3动画，旋转      wx.animation

wxml文件

<view class='xuan' bindtap='go' animation="{{animation}}"></view>

wxss文件

.xuan{
  width: 100px;
  height: 40px;
  background: deeppink;
}

js文件

data: {//绑定的animation
    animation:{}
  }

onReady: function () {//默认整个动画配置文件，直接复制即可
    this.animation = wx.createAnimation({
      duration:1000,//整个动画多长时间完成
      timingFunction:"linear",//匀速完成
      delay:100,//延迟时间
      transformOrigin:"right bottom 0",//旋转点设为右下角
      success:function(){
        console.log("success")
      }
    })
  },

go(){//该函数的实现，复制即可
    this.animation.rotate(-60).step()//step()方法可以实现该动画一些配置，如下
    // this.animation.rotate(-100).step({duration:3000,delay:500})
    this.setData({ animation: this.animation.export() })
  },

其他使用见官方文档     animation