animation ios手機無法暫停

標籤：mat   otto   step   ack   css   web   absolute   .com   no-repeat   

.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

animation ios手機無法暫停