☰

CSS 3 で点滅するテキストを作成する方法 質問する

tag-icon • tag-icon html css css-animations opacity
CSS 3 で点滅するテキストを作成する方法 質問する

現在、次のコードがあります:

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

.waitingForConnection {
  -webkit-animation-name: blinker;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
  -webkit-animation-duration: 1.7s;
}

点滅しますが、「一方向」にしか点滅しません。つまり、フェードアウトして、再び表示され、opacity: 1.0またフェードアウトして、再び表示され、というように繰り返されます...

フェードアウトしてから、このフェードバックから再び に「上げる」ことを希望しますopacity: 1.0。それは可能ですか?

ベストアンサー1

最初に を設定してopacity: 1;、 で終了すると0、 から始まり で0%終わるので、代わりに不透明度をに100%設定するだけで、残りは自動的に処理されます。050%

デモ

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}
<div class="blink_me">BLINK ME</div>

ここでは、アニメーションの継続時間を に設定し、を に1 second設定しています。つまり、全体を通して一定になります。最後に を使用しています。つまり、ずっと続くことになります。timinglinearinfinite

注: これがうまくいかない場合は、必要に応じて-webkit、-mozなどのブラウザプレフィックスを使用してくださいanimation。@keyframes詳細なコードを参照してください。ここ

コメントされているように、これは古いバージョンの Internet Explorer では動作しません。そのためには、jQuery または JavaScript を使用する必要があります...

(function blink() {
  $('.blink_me').fadeOut(500).fadeIn(500, blink);
})();

提案してくれたAlnitakに感謝しますより良いアプローチ。

デモ (jQuery を使用したブリンカー)

おすすめ記事