微信小程序点击添加 动画animation

<view class="box">
  <view class='{{rotate}}' data-sd="{{an}}" bindtap="clickMe" id='we'>

 <text>你</text> </view>


</view>

.box{
  width: 100%;
  height: 500rpx;
  background: pink;
  box-sizing: border-box;
  padding: 50rpx;
}
#we{
  width: 100rpx;
  height: 100rpx;
  background: red;
  border-radius: 100%;
  text-align: center;


}
#we text{
  padding: 23rpx;
  display: block;
}
.rotate{animation: zhuan 3s linear infinite;}
@keyframes zhuan{
  0%{
    transform: rotate(0deg)
  }
  20%{
    transform: rotate(60deg)
  }
   40%{
    transform: rotate(120deg)
  }
    60%{
    transform: rotate(180deg)
  }
     80%{
    transform: rotate(260deg)
  }
  90%{
    transform: rotate(300deg)
  }
    100%{
    transform: rotate(360deg)
  }
}

data: {
    rotate:"rotate",
    an:1,
  },
 clickMe:function(){
  console.log(123456789);
  if(this.data.an == 1){
      this.setData({
        rotate:"",
        an: 2
      })
  }else if(this.data.an==2){
    this.setData({
      rotate: "rotate",
      an: 1
    })

  }


  }