CSS動畫中如何簡化旋轉(zhuǎn)角度的百分比定義？

css動畫：巧妙簡化旋轉(zhuǎn)角度百分比設(shè)置

在CSS動畫中，旋轉(zhuǎn)動畫通常需要為每個關(guān)鍵幀指定具體的旋轉(zhuǎn)角度和百分比。例如：

@keyframes rotate360 {     0% {       --rotate-angle: 0deg;     }      100% {       --rotate-angle: 360deg;     } }

這種方法在角度變化復(fù)雜時，代碼會變得冗長且難以維護(hù)。 有沒有更簡潔的方案呢？ 答案是肯定的！我們可以利用CSS自定義屬性和calc()函數(shù)來實(shí)現(xiàn)。

首先，定義一個自定義屬性–rotate-angle，并指定其語法為角度類型：

@property --rotate-angle {   syntax: '<angle>';   inherits: false;   initial-value: 0deg; }

然后，在關(guān)鍵幀動畫中，我們只需定義起始和結(jié)束角度：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

@keyframes rotate {   0% {     --rotate-angle: 0deg;   }   100% {     --rotate-angle: 360deg;   } }

最后，在目標(biāo)元素的樣式中，使用calc()函數(shù)結(jié)合自定義屬性和百分比來計算旋轉(zhuǎn)角度：

#el {   transform: rotate(calc(var(--rotate-angle) * 100%)); /*  此處修正為更準(zhǔn)確的計算方式 */   animation: rotate 3s linear; }

calc(var(–rotate-angle) * 100%) 計算方式已修正，以確保旋轉(zhuǎn)角度與動畫進(jìn)度百分比正確對應(yīng)。 瀏覽器會自動計算動畫過程中–rotate-angle的中間值，從而實(shí)現(xiàn)平滑的旋轉(zhuǎn)效果。

這種方法避免了手動指定每個百分比點(diǎn)的旋轉(zhuǎn)角度，使代碼更簡潔、易于維護(hù)和理解，同時保持了動畫的流暢性。