JavaScript を使用せずに CSS フェードインおよびフェードアウト「読み込み中」テキスト アニメーション ループを作成する方法

単純な CSS アニメーション ループ: テキストのフェードインとフェードアウト「読み込み中」

テキストをフェードインおよびフェードアウトするループ アニメーションを CSS で作成するにはJavaScript を使用しない場合は、次の点を考慮してください:

<code class="css">@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}</code>

@keyframes ルールはアニメーション自体を定義します。この場合、アニメーションは要素の不透明度を完全な不透明から完全な透明に変更し、再び完全な透明に戻すだけです。

<code class="css">.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}</code>

.animate-flicker クラスは、そのクラスの要素にアニメーションを適用します。アニメーション プロパティは、アニメーションの名前、各反復の長さ (この場合は 1 秒)、およびアニメーションを無限に繰り返すかどうかを指定します。

注意すべき点の 1 つは、上記のコードは機能しない可能性があることです。すべてのブラウザで。より広範囲のブラウザとの互換性を確保するには、適切なベンダー プレフィックスをアニメーション プロパティに追加する必要があります。例:

<code class="css">.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}</code>

これらのベンダー プレフィックスを追加すると、アニメーションはほとんどの最新ブラウザで動作するはずです。

以上がJavaScript を使用せずに CSS フェードインおよびフェードアウト「読み込み中」テキスト アニメーション ループを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。