animation ios手机无法暂停

Posted 2020-11-08 jin7754

.arrow {
   position: absolute;
   top: 0;
   left: -25%;
   width: 157px;
   height: 42px;
   background: url(../images/zhizhen.png) no-repeat;
   transform-origin: 144px 21px;
   -webkit-transform-origin: 144px 21px;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   animation: dong 1s linear alternate infinite;
   -webkit-animation: dong 1s linear alternate infinite;
   /*animation-fill-mode: forwards;*/
   /*-webkit-animation-fill-mode: forwards;*/
}

@keyframes dong {
   0% {
      transform: rotateZ(45deg);
   }
   100% {
      transform: rotateZ(135deg);
   }

}

@-webkit-keyframes dong {
   0% {
      -webkit-transform: rotateZ(45deg);
   }
   100% {
      -webkit-transform: rotateZ(135deg);
   }

}



上述代码 发现用

$(‘.arrow‘).css({
  "webkitAnimationPlayState": "paused"
});
无法控制暂停
其他动画都可以控制暂停

@keyframes energydong {
   0% {
      bottom: 0;
   }
   100% {
      bottom: 370px;
   }
}
@-webkit-keyframes energydong {
   0% {
      bottom: 0;
   }
   100% {
      bottom: 370px;
   }
}

这样写可以。开始以为我写的有问题，可是怎样弄不行，后来我百度了才知道，大家也有类似问题，
解决办法是：
图片改为序列图,以关键帧的形式创建动画,这样设置animation-play-state就有效了,css代码如下:

animation: dong 1s steps(15) alternate infinite;
-webkit-animation: dong 1s steps(15) alternate infinite;


参考解决文章是：
http://www.cnblogs.com/xunhuang/p/6869103.html