建立一個純CSS 動畫循環來淡入淡出「載入」文字
在本教程中，我們的目標是創建一個模擬的CSS 動畫不會使用JavaScript 的淡入淡出「正在載入」文字。
問題陳述：
您已經使用關鍵影格建立了一個基本的CSS 動畫，但它沒有循環和淡入淡出
解決方案：
要建立循環動畫，請新增animation-iteration-count 和animation-direction 屬性。 animation-iteration-count 指定動畫應重複的次數，而animation-direction 確定動畫應向前或向後播放。
接下來，您必須包含特定於瀏覽器的前綴以獲得更好的相容性。
下面修改後的程式碼包含以下變更：
<code class="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 normal;
-moz-animation: flickerAnimation 1s infinite normal;
-o-animation: flickerAnimation 1s infinite normal;
animation: flickerAnimation 1s infinite normal;
}</code>用法：
將animate-flicker 類別應用到您想要「載入」的元素" 要出現的文字：
<code class="html"><div class="animate-flicker">Loading...</div></code>
這將創建一個無限動畫，使文字連續淡入和淡出。
以上是如何使用CSS為「載入」文字建立無限循環的淡入淡出動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
