css3样式？

为什么在模拟器上那个图像可以旋转，在真机上就不转了。。。

.rotation{
  /* rotation表示动画效果旋转linear（始终点）12s表示执行完的时间，linear匀速 infinite无限循环 */
  animation: rotation 12s linear infinite;
  -moz-animation: rotation 12s linear infinite;
  -webkit-animation: rotation 12s linear infinite;
  -o-animation: rotation 12s linear infinite;
}
.rotation-paused{
  animation-play-state: paused;
  -moz-animation-play-state: paused;
  -webkit-animation-play-state: paused;
  -o-animation-play-state: paused;
}
[@keyframes](/user/keyframes) rotation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

<view class='player-info'>
  <view class="player-disc {{isPlaying? 'play': ''}}">
    <image class="player-img rotation {{isPlaying? '':'rotation-paused'}}" src="{{picUrl}}"/>
  </view>
</view> // 其中isPlaying是判断是否旋转的标志