CSS3 で双方向の点滅テキストを作成するにはどうすればよいですか?

CSS 3 を使用した双方向の点滅テキストの実現

現在のコード @-webkit-keyframes 点滅器 {...} では、単方向になります。テキスト要素の点滅。テキストがフェードアウトしてフェードインする双方向効果を実現するには、次のようにアニメーション キーフレームを調整します。 -iteration-count: 無限;

-webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);

-webkit-animation-duration: 1.7s;
}

@-webkit-keyframes ブリンカー {
から { 不透明度: 1.0; }
50% { 不透明度: 0; }

を { 不透明度: 1.0; }

}

この調整では、不透明度を 1.0 から 50% マークの 0 に設定し、テキストを効果的にフェードアウトします。次に、アニメーションは不透明度を 1.0 に戻し、目的の双方向の点滅効果を作成します。点滅の間隔と継続時間は、@-webkit-keyframes ルールの値を調整することでカスタマイズできます。

以上がCSS3 で双方向の点滅テキストを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。