如何使用 CSS 3 制作闪烁的文字

Question

目前，我有这段代码：

 @-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 。那可能吗？

原文由 ojek 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

You are first setting opacity: 1; and then you are ending it on 0 , so it starts from 0% and ends on 100% , so instead只需将不透明度设置为 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 。这意味着它将继续下去。

Note: If this doesn’t work for you, use browser prefixes like -webkit , -moz and so on as required for animation and @keyframes 。你可以 在这里 参考我的详细代码

---

如评论所述，这不适用于旧版本的 Internet Explorer，为此您需要使用 jQuery 或 JavaScript …

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

感谢 Alnitak 提出 了更好的方法。

演示 （使用 jQuery 的闪烁器）

原文由 Mr. Alien 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

获得纯粹的“100% 开启，100% 关闭”闪烁的最佳方式，就像旧的 <blink> 是这样的：

 .blink {
  animation: blinker 1s step-start infinite;
}

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

 <div class="blink">BLINK</div>

原文由 Timmmm 发布，翻译遵循 CC BY-SA 3.0 许可协议