index.js

//index.js

Page({

  data: {

    playing:false

  },

  bingclick: function (e) {

    if (this.data.playing) {

      this.setData({ playing: false })

    } else {

      this.setData({ playing: true })

    }

  }

})

index.wxml

<!–index.wxml–>

<view class=“container”>

  <label>点击红色正方形(旋转/暂停)</label>

  <view class=“kuang” style=“animation-play-state:{{playing?‘running’:‘paused’}} !important” bindtap=“bingclick”></view>

</view>

index.wxss

/**index.wxss**/

@keyframes circle{0%{transform: rotate(0deg)}100%{ transform: rotate(360deg)}}

.kuang{

  margin: 160rpx auto 0;

  position: relative;

  z-index: 10;

  width: 400rpx;

  height: 400rpx;

  -webkit-animation: circle 20s linear infinite;

  -moz-animation: circle 20s linear infinite;

  animation: circle 20s linear infinite;

  background-color: red;

}