8

一時停止したCSSアニメーションから始めて、jQueryを使用してアニメーションを1秒間実行してから、もう一度一時停止します。

cssは以下のとおりです。

#animation {
  -webkit-animation: one 5s infinite;
  -webkit-animation-play-state: paused;
}

@-webkit-keyframes one {
  0% { .... }
  .....
  100% { .... }
}

いくつかの複雑なキーフレームがあり、目的は、20％の位置まで1秒間再生してから、停止することです。

以下のjQueryを試しましたが、機能しませんでした。

 $("#click").click(function(){
     $("#animation").css("-webkit-animation-play-state", "running").delay(1000).css("-webkit-animation-play-state", "paused");          
 });

（#clickは、アニメーションのトリガーとして使用したいdivです）

遅延とその後の一時停止を削除すると、正常に機能しますが、明らかにループを続けます。

例えば：

 $("#click").click(function(){
     $("#animation").css("-webkit-animation-play-state", "running");            
 });

立派な人は何を提案しますか？

4

1 に答える 1

17

cssプロパティを操作している場合、jQuery delay（）は機能しません。setTimeOut()代わりに使用してください

$("#click").click(function(){
     $("#animation").css("-webkit-animation-play-state", "running");
     setTimeout(function() { 
       $("#animation").css("-webkit-animation-play-state", "paused");
     }, 1000);
});
于 2012-04-28T05:17:54.590 に答える