提供されたコンテンツに適した質問形式のタイトルをいくつか示します。 * CSS アニメーションループ: JavaScript を使用せずにテキストを無限にフェードインおよびフェードアウトする方法 * CS でのテキストの無限フェーディングループの作成-CSSチュートリアル-php.cn

提供されたコンテンツに適した質問形式のタイトルをいくつか示します。 * CSS アニメーションループ: JavaScript を使用せずにテキストを無限にフェードインおよびフェードアウトする方法 * CS でのテキストの無限フェーディングループの作成

DDD

リリース： 2024-10-26 12:54:29

オリジナル

1069 人が閲覧しました

Here are a few question-style titles that fit your provided content:

* CSS Animation Loop: How to Fade Text In and Out Infinitely without JavaScript?
* Creating an Infinite Fading Loop for Text in CSS: Solving the Compatibility Issue
* Making Text

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

質問

無限のアニメーションを作成するにはどうすればよいですか? JavaScript を使用せずにテキストをフェードインおよびフェードアウトする CSS アニメーションをループしますか?試してみたにもかかわらず、問題は未解決のままです:

@keyframes flickerAnimation { /* flame pulses */
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

ログイン後にコピー

回答

ブラウザ間の互換性を確保するには、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;
}

ログイン後にコピー

更新されたコードを使用してください次の HTML を使用します:

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

ログイン後にコピー

以上が提供されたコンテンツに適した質問形式のタイトルをいくつか示します。 * CSS アニメーションループ: JavaScript を使用せずにテキストを無限にフェードインおよびフェードアウトする方法 * CS でのテキストの無限フェーディングループの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。