css3 アニメーションの遅延の問題_html/css_WEB-ITnose

.jiage{オーバーフロー:非表示;幅:72%;背景:url(../images/bg_2.png);位置:絶対;トップ:140px; 1;アニメーション:myFirst 1.5s リニア 2s;-webkit-animation:myFirst 1.5s リニア 2s;-o-animation:myFirst 1.5s リニア 2s; -moz-animation:myFirst 1.5s リニア 2s;-ms-animation:myFirst 1.5 s リニア 2s; }
@keyframes myFirst
{
0%{ top:-170px;}
100%{ top:140px; }
}
@-webkit-keyframes myFirst
{
0%{ top:-170px; }
100%{ top:140px;}
}

ページが読み込まれた後、このアニメーションを 2 秒間再生させたいのですが、初期位置は上部に設定されています: 140px; このようにして、アニメーションはページ上に表示されます。最初の 2 秒間で、-170-140 の 2 秒後に実行します このアクションが最初の 2 秒間で表示されないようにし、2 秒後にアニメーションを実行するにはどうすればよいですか? この要素にアニメーションを追加するための CSS

js を使用します。 2 秒後にアニメーション用の CSS をこの要素に追加します

setInterval() を使用して前に 2 秒の一時停止を制御しますか?

2 秒後にアニメーションを追加します。 CSS のこの部分
前の 2 秒の一時停止を制御するには setInterval() を使用しますか?

このメソッドは複数回呼び出されます。つまり、実行したい場合は 2 回で 1 回だけメソッドが実行されます。一度実行したら、setTimeout() を使用します。

追記: 最初にメソッドを記述する必要があります。このメソッドでは、アニメーションを付けたい要素にアニメーション CSS を追加できます。

js を使用して制御し、2 秒後に CSS のアニメーション部分を要素に追加します

setInterval() を使用して前の 2 秒の一時停止を制御しますか

このメソッドは複数回呼び出されますか? , 意味 作成したメソッドは 2 秒に 1 回実行されます。1 回だけ実行したい場合は、setTimeout() を使用します。
追記: 最初にメソッドを記述する必要があります。このメソッドでは、アニメーションを付けたい要素にアニメーション CSS を追加できます。

ページがロードされてから 2 秒後にクラスを追加したいです。ページをロードするためのイベントはありますか?
window.onload=function(){} //ページがロードされ、関数が自動的に実行されます
方法アニメーションにはjqueryを使用するのが良いですが、css3はアニメーションにあまり柔軟性がなく、互換性も良くありません

アニメーションにはjqを使用する方が良いです。 。 。

アニメーションにはアニメーション遅延プロパティがあります
-webkit-animation-delay:2s;

.jiage{overflow:hidden;width:72%; background:url(../images/bg_2.png); margin:0 auto; position:absolute; left:14%;top:-170px; z-index:1;animation:myFirst 1.5s linear 2s forwards } @keyframes myFirst { 0%{ top:-170px;} 100%{ top:140px; } }