如何使用純 CSS 建立循環「載入」文字淡入淡出動畫？

建立循環CSS動畫來淡入淡出「Loading」文字

實現「Loading」的連續淡入淡出動畫效果不使用JavaScript 的文字，讓我們深入研究CSS 動畫的世界。操作方法如下：

設定動畫關鍵幀

@keyframes 規則定義動畫的關鍵幀，指定特定時間戳的不透明度值。在我們的例子中，我們希望文本淡入和淡出。

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

應用動畫

我們使用 CSS 將動畫套用到所需的 HTML 元素類別名稱。動畫屬性採用關鍵影格動畫的名稱和持續時間。

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

跨瀏覽器相容性

為了確保跨瀏覽器相容性，必須包含動畫屬性的瀏覽器特定前綴。

<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>

HTML 整合

最後，新增具有類別名稱的 HTML 元素以顯示動畫文字。

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

結果

動畫現在將連續淡入和淡出“加載”文本，創建循環效果。

以上是如何使用純 CSS 建立循環「載入」文字淡入淡出動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！