[解決済み] 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 . それは可能ですか？

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

最初に設定するのは opacity: 1; で終了させ、さらに 0 から始まるので 0% で終了し 100% ということで、代わりに不透明度を 0 で 50% で、あとは勝手にやってくれる。

デモの様子

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

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

<div class="blink_me">BLINK ME</div>

ここでは、アニメーションのデュレーションを 1 second を設定し、さらに timing から linear . つまり、ずっと一定になるということです。最後に、私は infinite . つまり、延々と続くということです。

注：これがうまくいかない場合は、ブラウザの接頭辞として -webkit , -moz などに必要な animation と @keyframes . 私の詳細なコードを参照することができます こちら

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

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

^{Alnitak さんの提案に感謝します。 より良い方法 .}

デモ (jQueryを使ったBlinker）。