JavaScript やトランジションを使用せずに CSS3 で瞬き効果を作成するにはどうすればよいですか?

CSS3 を使用したトランジションなしの点滅アニメーション

質問:

JavaScript やテキスト装飾を使用せずにテキストを点滅させることはできますか?古典的な を模倣しています。連続遷移のないタグはありますか?

答え:

古いブラウザのタグのデューティ サイクルは 80% でした。つまり、時間の 80% で表示され、20% で非表示になりました。この動作を厳密に再現し、テキストのみに影響を与える CSS ソリューションを次に示します。

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

Usage:

This is <span class="blink">blinking</span> text.

以上がJavaScript やトランジションを使用せずに CSS3 で瞬き効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。