CSS を使用してテキストを「ロード」するための無限フェードループアニメーションを作成する方法-CSSチュートリアル-php.cn

CSS を使用してテキストを「ロード」するための無限フェードループアニメーションを作成する方法

Susan Sarandon

リリース： 2024-10-26 09:21:30

オリジナル

289 人が閲覧しました

How to Create an Infinite Fading Loop Animation for

簡単な CSS アニメーション: テキストの「読み込み中」の無限フェードループ

フェードインとフェードアウトを繰り返すテキストのシームレスなループアニメーションを実現するにはでは、CSS アニメーションの世界を掘り下げます。最初の試みでは骨組みとなるフレームワークは提供されましたが、さまざまなブラウザ間でアニメーションをレンダリングするために必要な精緻さが欠けていました。

ブラウザの境界を埋める: アニメーションのプレフィックス

キーブラウザ間の互換性を確保するには、ブラウザ固有のプレフィックスが必要です。これらのプレフィックスは、さまざまなブラウザにアニメーションを一貫した方法で解釈するよう指示します。次のコードには、これらのプレフィックスが組み込まれています。

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

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

ログイン後にコピー

アニメーションの適用: 「読み込み中」テキストのフェードアウト

アニメーションを適用するには、単に「animate- flicker" クラスを、アニメーション化したいテキストを含む要素に追加します。

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

ログイン後にコピー

魅惑的なループをご覧ください: テキストのフェードを観察

この最後の仕上げで、 CSS によって完全に駆動されるフェードテキストの無限ループを目撃し、読み込みプロセスを示す微妙だが魅力的な視覚的な合図を提供します。

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

CSS を使用してテキストを「ロード」するための無限フェード ループ アニメーションを作成する方法

CSS を使用してテキストを「ロード」するための無限フェードループアニメーションを作成する方法