如何使用 CSS 建立「載入」文字的無限淡入循環動畫？-css教學-PHP中文網

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

Susan Sarandon

發布： 2024-10-26 09:21:30

原創

289 人瀏覽過

How to Create an Infinite Fading Loop Animation for

輕鬆的CSS 動畫：「載入」文字的無限淡入循環

實現反覆淡入淡出的無縫循環動畫，我們深入研究CSS 動畫的世界。雖然最初的嘗試提供了一個骨架框架，但它缺乏跨各種瀏覽器渲染動畫所需的技巧。

彌合瀏覽器鴻溝：為動畫添加前綴

關鍵確保跨瀏覽器相容性在於特定於瀏覽器的前綴。這些前綴指示不同的瀏覽器以一致的方式解釋動畫。以下程式碼包含這些前綴：

<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;
   -moz-animation: flickerAnimation 1s infinite;
   -o-animation: flickerAnimation 1s infinite;
    animation: flickerAnimation 1s infinite;
}</code>

登入後複製

應用動畫：淡入「載入」文字

要應用動畫，我們只需新增「animate- flicker" 類別到包含我們想要動畫的文字的元素：

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

登入後複製

看令人著迷的循環：觀看文字淡出

透過這最後的接觸，您將見證完全由CSS 驅動的淡入淡出文字的無限循環，提供微妙而迷人的視覺提示來指示加載過程。

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