如何使用 CSS3 创建平滑淡入淡出的闪烁文本？

使用 CSS 3 轻松实现闪烁文本

问题：

如何创建闪烁逐渐淡出并随后淡入的文本，而不是仅仅淡出然后淡出立即重新出现？

答案：

要实现此效果，您需要在动画关键帧定义中将不透明度设置为 0（50%）。这将确保文本在动画周期中逐渐淡出然后淡入。

代码修改：

之前的代码是：

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

要解决此问题，请将其替换为：

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

此修改将使文本在动画持续时间的 50% 处淡出，然后在剩余 50% 时间内逐渐淡出。

演示：

<div>
<pre class="brush:php;toolbar:false">.blink_me {
  animation: blinker 1s linear infinite;
}

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

就这样吧！闪烁的文本具有无缝的淡入淡出效果，这一切都归功于 CSS 3 的动画功能。