BinaryDevelop
  1. ホーム
  2. css

シンプルなCSSアニメーションのループ - "Loading "テキストのフェードインとフェードアウト

2023-10-02 21:27:18

質問

Javascriptを使わずに、テキストを無限にフェードイン、アウトする簡単なループCSSアニメーションクラスを作りたいと思います。 私はCSSアニメーションについてあまり知らないので、まだ解明できていませんが、以下は私が到達した範囲です。 

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

どのように解決するのですか？

欽ちゃんの言うとおり、ブラウザ固有の接頭辞をつける必要があります。これでほとんどのブラウザをカバーできるはずです。 

@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;
}

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

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します