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

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

Patricia Arquette

リリース： 2024-10-29 00:11:30

オリジナル

617 人が閲覧しました

How to Create an Infinitely Looping Fading Animation for

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

このチュートリアルでは、シミュレーションを行う CSS アニメーションを作成することを目的としています。 JavaScript を使用せずにフェードアウトする「読み込み中」テキスト。

問題ステートメント:

キーフレームを使用して基本的な CSS アニメーションを作成しましたが、ループせず、フェードインおよびフェードアウトしません。

解決策:

ループアニメーションを作成するには、animation-iteration-count プロパティとanimation-direction プロパティを追加します。 anime-iteration-count はアニメーションを繰り返す回数を指定し、animation-direction はアニメーションを順方向に再生するか逆方向に再生するかを決定します。

次に、互換性を高めるためにブラウザ固有のプレフィックスを含める必要があります。

以下の変更されたコードには、次の変更が組み込まれています。

<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 normal;
  -moz-animation: flickerAnimation 1s infinite normal;
  -o-animation: flickerAnimation 1s infinite normal;
  animation: flickerAnimation 1s infinite normal;
}</code>

ログイン後にコピー

使用法:

「読み込み」を行う要素に animate-flicker クラスを適用します。 " 表示するテキスト:

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

ログイン後にコピー

これにより、テキストを連続的にフェードインおよびフェードアウトする無限アニメーションが作成されます。

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

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

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