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

建立一個純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中文網其他相關文章！