run/pause jQueryを使用したCSSアニメーション

Question

一時停止した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");    
}); 

あなた罰金の人々は何を示唆していますか？

Answer 1

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

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