cssキーフレームアニメーションがページの読み込み時に実行されないようにするにはどうすればよいですか？

CSSはアニメーションを0に設定しています

body.preload * {animation-duration：0s！important; -webkit-animation-duration：0s！important; transition：background-color 0s、opacity 0s、color 0s、width 0s、height 0s、padding 0s、margin 0s！important;}
JSは少し遅れてクラスを削除するので、アニメーションは通常の時間に発生します:)
 
setTimeout（function（）{document.body.className = '';}、500）; 
  解決策1-最初のホバーでアニメーションを追加する  
 
おそらく最良のオプションは、ユーザーがカーソルを合わせるまでダウンアニメーションを表示しないことです。初めてのコンテナ。
 
 
 
これには、次に、マウスオーバーイベントを実行し、その時点でアニメーションを含むクラスを追加し、イベントリスナーを削除します。これの主な（潜在的な）欠点は、Javascriptに依存していることです。
 
;（function（）{var c = document.getElementById（ 'container'）; function addAnim（）{c.classList.add（ 'animated'）//リスナーを削除します。不要になりましたc.removeEventListener（ 'mouseover'、 addAnim）;}; //コンテナのマウスオーバーをリッスンしますc.addEventListener（ 'mouseover'、addAnim）;}）（）;
#container {position：relative;幅：100px;高さ：100px; border-style：inset; } #content {position：absolute; top：100px;幅：100％;高さ：100％;背景色：薄緑;不透明度：0; } / *これは最初のマウスオーバーで追加されます* /＃container.animated #content {-webkit-animation：animDown 1s ease; } #container：hover #content {-webkit-animation：animUp 1s ease;アニメーション-塗りつぶし-モード：転送; -webkit-animation-fill-mode：forwards; } @ -webkit-keyframes animUp {0％{-webkit-transform：translateY（0）;不透明度：0; } 100％{-webkit-transform：translateY（-100％）;不透明度：1; }} @ -webkit-keyframes animDown {0％{-webkit-transform：translateY（-100％）;不透明度：1; } 100％{-webkit-transform：translateY（0）;不透明度：0; }}
  
  解決策2-非表示のアニメーションを再生する  
 
これを回避するもう1つの方法は、最初に要素を非表示にし、非表示のときにアニメーションが再生されることを確認してから、表示することです。これの欠点は、タイミングがわずかにずれている可能性があり、表示が早すぎることです。また、ホバーがすぐに利用できないこともあります。
 
これには、アニメーションの長さを待ってから作成するJavascriptが必要です。#contentが表示されます。これは、イニシャルも設定する必要があることを意味します不透明度0なので、ロード時に表示されず、キーフレームからの可視性-これらはとにかく何もしていません：
 
//アニメーションの長さとビットを待ってから、要素を表示しますwindow.setTimeout（function（）{document.getElementById（ 'content'）。style.visibility = 'visible';}、1100）;
#container {position：relative;幅：100px;高さ：100px; border-style：inset; } #content {visibility：hidden; -webkit-animation：animDown1s簡単;位置：絶対; top：100px;幅：100％;高さ：100％;背景色：薄緑;不透明度：0; } #container：hover #content {-webkit-animation：animUp 1s ease;アニメーション-塗りつぶし-モード：転送; -webkit-animation-fill-mode：forwards; } @ -webkit-keyframes animUp {0％{-webkit-transform：translateY（0）;不透明度：0; } 100％{-webkit-transform：translateY（-100％）;不透明度：1; }} @ -webkit-keyframes animDown {0％{-webkit-transform：translateY（-100％）;不透明度：1; } 100％{-webkit-transform：translateY（0）;不透明度：0; }}
  
  解決策3-トランジションを使用する  
 
あなたのシナリオでは、このCSSを作成するには、キーフレームと代わりに遷移するので、不透明度：0で、ホバーだけで変化があります不透明度と変身：
 
#container {position：relative;幅：100px;高さ：100px; border-style：inset; } #content {position：absolute; top：100px;幅：100％;高さ：100％;背景色：薄緑; / *初期状態-非表示* / opacity：0; / *プロパティをアニメーションに設定します-ホバーと復帰に適用されます* / transition：opacity 1s、transform 1s; } #container：hover #content {/ *プロパティを変更するように設定するだけです-可視性を変更する必要はありません* / opacity：1; -webkit-transform：translateY（-100％）; transform：translateY（-100％）; }
   
 
 
この純粋なCSSを実行する方法はありますか？
 
 
はい、絶対に：フォークを参照してくださいhttp://jsfiddle.net/5r32Lsme/2/JSは実際には必要ありません。
  
 
ホバーイベントの後でのみ実行することをお勧めします。
 
 
したがって、ホバーイベントでもない場合に何が起こるかをCSSに伝える必要があります-あなたの例では：
 
#container：not（：hover）#content {可視性：非表示;遷移：可視性0.01s 1s; }
ただし、注意すべき点が2つあります。
 
1）上記の遷移遅延は、アニメーションの長さと一致する必要があります
 
2）アニメーションのonLoadアニメーションを非表示にするために使用するプロパティを使用することはできません。必要な場合 視認性 アニメーションで、最初はアニメーションを非表示にします。
 
#container：not（：hover）#content {top：-8000px;遷移：上位0.01秒1秒; }
補足：
 
接頭辞付きのCSSプロパティの後にネイティブCSSプロパティを配置することをお勧めします。そのため、次のようにする必要があります。
 
-webkit-animation-fill-mode：転送;アニメーション-塗りつぶしモード：転送;
そして今、ネイティブがあります 変身  
 
-webkit-transform：translateY（0）;変換：translateY（0）;