簡單CSS 動畫循環：淡入和淡出“加載”文本

在CSS 中創建淡入和淡出文本的循環動畫如果不使用JavaScript，請考慮以下內容：

@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}

@keyframes 規則定義動畫本身。在這種情況下，動畫只是將元素的不透明度從完全不透明更改為完全透明，然後再返回。

.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}

.animate-flicker 類別將動畫套用到具有該類別的任何元素。 Animation 屬性指定動畫的名稱、每次迭代的持續時間（在本例中為 1 秒）以及動畫是否應無限重複。

需要注意的是，上面的程式碼可能不起作用在所有瀏覽器中。為了確保與更廣泛的瀏覽器相容，您需要向動畫屬性添加適當的供應商前綴。例如：

.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}

在添加這些供應商前綴後，動畫應該可以在大多數現代瀏覽器中運行。