以下是一些適合您提供的內容的問題式標題： * CSS 動畫循環：如何在沒有 JavaScript 的情況下無限淡入和淡出文字？ * 在 CS 中為文字建立無限淡入循環

簡單的CSS 動畫循環：淡入淡出「載入」文字

問題

如何創建無限CSS 動畫中的無限CSS 動畫中的無限循環可以在不使用JavaScript 的情況下淡入和淡出文字？雖然嘗試過，問題仍未解決：

@keyframes flickerAnimation { /* flame pulses */
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

答案

為了確保跨瀏覽器的兼容性，請在CSS 中包含供應商前綴：

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-o-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-moz-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
@-webkit-keyframes flickerAnimation{
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}
.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

使用更新的程式碼使用以下HTML：

<div class="animate-flicker">Loading...</div>

以上是以下是一些適合您提供的內容的問題式標題： * CSS 動畫循環：如何在沒有 JavaScript 的情況下無限淡入和淡出文字？ * 在 CS 中為文字建立無限淡入循環的詳細內容。更多資訊請關注PHP中文網其他相關文章！