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

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

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

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

.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

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

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

.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

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