如何使用 CSS3 建立平滑淡入淡出的閃爍文字？

使用CSS 3 輕鬆實現閃爍文字

問題：

問題：

問題：

如何逐漸創造出漸變淡出>並隨後淡入的文本，而不是僅僅淡出然後淡出立即重新出現？

答案：

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

要實現此效果，您需要在動畫關鍵影格定義中將不透明度設為 0（50%）。這將確保文字在動畫週期中逐漸淡出然後淡入。

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

程式碼修改：

之前的程式碼是：

要解決此問題，請將其替換為：

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

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

此修改將使文字在動畫持續時間的50% 處淡出，然後在剩餘50%時間內逐漸淡出。

示範： 就這樣吧！閃爍的文字具有無縫的淡入淡出效果，這一切都歸功於 CSS 3 的動畫功能。