jQuery $ .css（）関数は「アニメーション遅延」を適切に解釈しない（webkitブラウザで）！ - jquery、css3、google-chrome、animation、webkit

編集済み-間違ったコードペンをリンクしました これは、Webkitブラウザーでのみ発生するようです。 Firefoxでは、意図したとおりに機能します。 IEでは、正しいインラインスタイルが追加されますが、プレフィックスは追加されません（javascriptで「animation-delay」ではなく「ms-animation-delay」を指定しても

複製しようとしているコードペンで遊んでいますいくつかのGoogleマテリアルエフェクト（それらがポリマーに含まれていることは知っていますが、楽しみのためにエフェクトの一部を複製してみたかっただけです）。何らかの奇妙な理由で、jQueryは「animation-delay：[value]」ではなく「animation：[value]」をインラインスタイリングに誤って配置しています。誰が理由と回避方法を説明できますか？

コデポンはここにあります： リンク

JS：

$(document).ready(function(){
var lis = $("li"), str;

for(var x=2; x<= lis.length; x++){
str=(0.2+ 0.1*(x-2))+"s";
lis.eq(x-1).css({"animation-delay": str});
}
});

これは遷移遅延でも発生します。

回答：

FireFoxでは、プロパティを変更するだけでアニメーションの遅延を変更できるなど、サブプロパティを使用してアニメーションを更新できるように見えます animation-delay。他のブラウザ（Chrome、Opera、IE ...）がアニメーションの更新方法をサポートしていないのは残念です。つまり、アニメーションを変更するには、設定する必要があります animation-name まったく新しい名前（新しいキーフレーム名）に。したがって、単に変更したい場合 animation-delay、異なる名前の2つのキーフレームを作成する必要がある場合があります（ただし、同じ内部キールール、異なる名前のみが必要です）。そして、全体を再適用します animation 新しい名前と希望の animation-delay このような：

//the current animation:
animation: display 5s infinite;
//the updated animation:
animation: display2 5s 1s infinite;

ご覧のとおり、違いは名前（display2 の代わりに display）の遅延を追加しました 1s。この方法は、すべてのブラウザーで機能します。

しかし、私はあなたがちょうど適用したいことに気づきますスクリプトを使用してアニメーションを作成するため、最も簡単なことは、CSSコード内のすべてのアニメーションを削除し（キーフレームを保持するだけ）、スクリプトを使用してアニメーションを適用することです。display2）の display キーフレーム：

$(document).ready(function(){
var lis = $("li"), str;
for(var x=1; x<= lis.length; x++){
str=(200+ 100*(x-1))+"ms";
lis.eq(x-1).css({"animation": "display 5s " + str + " infinite"});
}
});

デモを更新しました.

.attr("style","-webkit-animation-delay:"+str+";animation-delay:"+str);