先来描述需求：

让三个圆转圈，用户不点击的时候自己慢慢动，用户点击后快速转一会儿，接着再过一段时间后恢复慢慢转的状态。

再来描述问题：

IOS设备下，用户点击后，动画并不会快速地转。

在仔细模拟了问题后，得出结论：在IOS设备上执行使用动态class绑定的CSS动画是不会有过程的，会直接展示动画的结果。

而在安卓和模拟器上完全没问题。

IOS运行环境：

以下是摘取出来的代码（有点长，还请多多谅解，谢谢！）：

HTML部分
<view class="panel2_footer">
  <view class="panel2_footerBtn {{panel2FooterBtn == 'active' ?  'active' : ''}}" bindtap='tapFooterBtn'>
    <image class="panel2_a" src="../images/icons/icon-panel2_a.png"></image>
    <image class="panel2_b" src="../images/icons/icon-panel2_b.png"></image>
    <image class="panel2_c" src="../images/icons/icon-panel2_c.svg"></image>
  </view>
</view>

JS部分
Page({
  data: {
    panel2FooterBtn:''
  },
  tapFooterBtn(){
    if(this.data.panel2FooterBtn == 'active'){return}
    this.setData({ panel2FooterBtn: 'active' });
    setTimeout(() => {
      this.setData({ panel2FooterBtn: '' });
    }, 2800)
  }
})

CSS部分
@keyframes panel2FooterBtnC {
  from {transform: rotate(0deg);}
  to {transform: rotate(360deg);}
}
@-webkit-keyframes panel2FooterBtnB {
  from {transform: rotate(360deg);}
  to {transform: rotate(0deg);}
}
.panel2_footer .panel2_footerBtn {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 0);
  width: 318rpx;
}
.panel2_footer .panel2_footerBtn .panel2_a,
.panel2_footer .panel2_footerBtn .panel2_c,
.panel2_footer .panel2_footerBtn .panel2_b{
  position: absolute;
}
.panel2_footer .panel2_footerBtn .panel2_a {
  left: 9%;
  width: 260rpx;
  height: 260rpx;
  bottom: -63px;
  -webkit-animation: panel2FooterBtnC 10s linear infinite;
  animation: panel2FooterBtnC 10s linear infinite;
}
.panel2_footer .panel2_footerBtn .panel2_b {
  left: 5%;
  width: 290rpx;
  height: 290rpx;
  bottom: -70px;
  -webkit-animation: panel2FooterBtnB 10s linear infinite;
  animation: panel2FooterBtnB 10s linear infinite;
}
.panel2_footer .panel2_footerBtn .panel2_c {
  left: 0%;
  width: 322rpx;
  height: 327rpx;
  bottom: -78px;
  -webkit-animation: panel2FooterBtnC 10s linear infinite;
  animation: panel2FooterBtnC 10s linear infinite;
}
.panel2_footer .panel2_footerBtn.active image {
  transition: all 1s;
  animation-duration: 2s;
}