使用自定義屬性來糾纏關鍵幀動畫中的變化

利用CSS自定義屬性靈活控制關鍵幀動畫的變體，無需預處理器！本文將探討如何僅使用CSS和自定義屬性來實現關鍵幀動畫的自定義，避免使用預處理器（如mixins）帶來的額外依賴。

您是否曾想過如何在不依賴預處理器的情況下自定義CSS動畫關鍵幀？我經常為此求助於預處理器，但如果能擺脫這種依賴，直接使用原生CSS豈不是更好？

事實證明，僅用CSS就能實現關鍵幀動畫變體的控制，這要歸功於CSS自定義屬性！讓我們深入了解CSS關鍵幀的工作原理，以及如何利用CSS和自定義屬性來增強它們。

CSS動畫繼承機制

當我們將動畫應用於元素時，可以自定義一些屬性，例如持續時間、延遲等等。來看一個簡單的例子：有兩個類.walk和.run，它們都使用相同的動畫（名為breath），但.run的動畫執行速度比.walk快（分別為0.5s和2s）。

 <code>@keyframes breath { from { transform: scale(0.5); } to { transform: scale(1.5); } } /* 两者共享相同的动画，但行走比奔跑慢*/ .walk { animation: breath 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

每次復用動畫時，它的行為會根據我們賦予它的屬性而有所不同。因此，可以說動畫的行為繼承自應用它的元素。

但動畫的規則（本例中的縮放比例）又該如何處理呢？回到breath動畫的例子：.walk類執行breath動畫的速度較慢，但也需要更大的縮放比例，因此我們需要將它的縮放值設置得比.run類更大，.run類則採用更小、更頻繁的縮放變化。

在純CSS中，常見的做法是複制原始動畫，然後直接在類中調整值：

 <code>@keyframes breath { /* 与之前相同... */ } /* 与breath类似，但缩放比例不同*/ @keyframes breathDeep { from { transform: scale(0.3); } to { transform: scale(1.7); } } .walk { animation: breathDeep 2s alternate; } .run { animation: breath 0.5s alternate; }</code>

雖然這種方法有效，但更好的解決方案是同時復用動畫的屬性和值！如何做到呢？利用CSS變量的繼承機制！讓我們看看如何實現：

 <code>/* breath动画的行为基于继承的CSS变量值*/ @keyframes breath { from { transform: scale(var(--scaleStart)); } to { transform: scale(var(--scaleEnd)); } } .walk { --scaleStart: 0.3; --scaleEnd: 1.7; animation: breath 2s alternate; } .run { --scaleStart: 0.8; --scaleEnd: 1.2; animation: breath 0.5s alternate; }</code>

是不是很酷？現在我們無需編寫重複的動畫就能從同一個動畫中獲得不同的效果！

如果您需要更進一步，請記住我們還可以使用JavaScript更新CSS自定義屬性，不僅可以更新根變量，還可以更新特定元素的變量。我發現這非常強大，因為我們可以利用JavaScript創建更高效的動畫，同時不會損失CSS動畫的原生優化。這真是雙贏！

以上是使用自定義屬性來糾纏關鍵幀動畫中的變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！