CSS3 で滑らかにフェード点滅するテキストを作成するには?

CSS 3 で簡単にテキストを点滅させる

質問:

点滅を作成するにはどうすればよいですか?単にフェードアウトするのではなく、徐々にフェードアウトし、その後再びフェードインするテキスト。すぐに再表示されますか?

答え:

この効果を実現するには、アニメーション キーフレーム定義で不透明度を 50% の 0 に設定する必要があります。これにより、アニメーション サイクル中にテキストが徐々にフェードアウトしてから再びフェードインするようになります。

コードの変更:

以前のコードは次のとおりです:

@-webkit-keyframes blinker {
  from { opacity: 1.0; }
  to { opacity: 0.0; }
}

問題を解決するには、次のように置き換えます:

@-webkit-keyframes blinker {
  50% {
    opacity: 0;
  }
}

この変更により、アニメーション期間の 50% でテキストがフェードアウトし、残りの 50% で徐々にフェードインします。

デモ:

<div>
<pre class="brush:php;toolbar:false">.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

そして、それができました！シームレスなフェードインおよびフェードアウト効果を備えたテキストの点滅は、すべて CSS 3 のアニメーション機能のおかげです。