建立循環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中文網其他相關文章！
