延遲密鑰幀動畫的新方法

在CSS @keyframes動畫中不直接支持迭代之間的暫停。當animation-delay推遲動畫的開始時，在迭代之間插入延遲需要解決方法。本文探討了有效的技術，解決了先前方法的局限性。

在適應以太空為主題的員工門戶網站的過程中，出現了需求。在保持隨機性的同時，需要較少的恆星來最大程度地減少干擾和CPU負載。

現有方法的局限性

傳統方法涉及將密鑰幀調整為100％的一部分，並保持最終狀態直到100％模擬停頓。這很麻煩，容易出錯，並且使理解動畫的邏輯變得困難。

 @keyframes my-animation {
  / *動畫（0％至50％） */
  0％{寬度：0; }
  15％{寬度：100px; }
  / *暫停（50％至100％） */
  50％，100％{寬度：0; }
}

一種新方法：有條件隱藏

高級方法使用第二個@keyframes設置來控制暫停期間的可見性。這將動畫邏輯與暫停分開。

 。
  動畫：my-awesome-boop 1s，暫停 - 識別4s；
}

@keyframes my-awesome-boop {
  / *您的主要動畫在這裡 */
}

@keyframes暫停 - 介於 - 曲線{
  / *可見（25％） */
  0％，25％{不透明度：1; }
  / *隱藏（75％） */
  25.1％，100％{不透明度：0; }
}

暫停持續時間必須是動畫持續時間的倍數。無限重複重複的密鑰幀將立即重新啟動，覆蓋更長的動畫。

關鍵洞察力：寬鬆功能在定義的密鑰幀之間適用，而不是0％至100％。這意味著將寬鬆曲線單獨應用於連續鍵幀之間的每個屬性。

在上面的示例中， my-awesome-beboop在暫停期間多次奔跑，然後才能恢復。

這是適用於流星動畫的方式：

在停頓期間保持可見性

如果在停頓期間必須保持動畫，則第二個@keyframes集可以抵消主動畫的運動。例如，如果使用translateX ， left或margin-left動畫以中和運動。

示例包括使用transform-origin或用left動畫來抵消translateX暫停。暫停translateX進行多個迭代需要更複雜的密鑰框架：

 / *暫停三個迭代 */
@keyframes slide-left pape {
  25％，50％，75％{左：0; }
  37.5％，62.5％，87.5％{左：-100px; }
  100％{左：0; }
}

由於動畫衝突，可能會發生較小的抖動。

結論

在暫停期間隱藏元素或抵抗transform動畫提供了最佳性能。操縱left ， margin或width之類的特性在計算上比調整opacity更重要。

歸功於Nakaya的原始流星動畫。

以上是延遲密鑰幀動畫的新方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！