純粋な CSS を使用してループ「読み込み中」テキスト フェード アニメーションを作成する方法

「読み込み中」テキストをフェードインおよびフェードアウトするループ CSS アニメーションの作成

「読み込み中」の連続フェード アニメーション効果を実現するにはJavaScript を使用せずにテキストを作成できるので、CSS アニメーションの世界を詳しく見てみましょう。その方法は次のとおりです。

アニメーション キーフレームのセットアップ

@keyframes ルールは、アニメーションのキーフレームを定義し、特定のタイムスタンプにおける不透明度の値を指定します。この例では、テキストをフェードインおよびフェードアウトさせます。

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

アニメーションの適用

CSS を使用して、目的の HTML 要素にアニメーションを適用します。クラス名。アニメーション プロパティは、キーフレーム アニメーションの名前と継続時間を取得します。

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

ブラウザ間の互換性

ブラウザ間の互換性を確保するには、以下を含めることが重要です。アニメーション プロパティのブラウザ固有のプレフィックス。

<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>

HTML 統合

最後に、アニメーション テキストを表示するクラス名を持つ HTML 要素を追加します。

<code class="html"><div class="animate-flicker">Loading...</div></code>

結果

アニメーションは「読み込み中」テキストを継続的にフェードインおよびフェードアウトし、ループ効果を作成します。

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