如何在沒有 JavaScript 的情況下創建 CSS 淡入和淡出「載入」文字動畫循環？

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

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

<code class="css">@keyframes flickerAnimation {
  0%   { opacity:1; }
  50%  { opacity:0; }
  100% { opacity:1; }
}</code>

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

<code class="css">.animate-flicker {
    opacity:1;  
    animation: flickerAnimation 1s infinite;
}</code>

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

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

<code class="css">.animate-flicker {
   -webkit-animation: flickerAnimation 1s infinite;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}</code>

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

以上是如何在沒有 JavaScript 的情況下創建 CSS 淡入和淡出「載入」文字動畫循環？的詳細內容。更多資訊請關注PHP中文網其他相關文章！