在CSS動畫中，如何簡化旋轉角度的百分比設置？

巧妙簡化css動畫旋轉角度設置

在CSS動畫中，逐幀設置旋轉角度百分比（例如，從0%到100%逐個設置角度）會使代碼冗長且難以維護。本文介紹一種利用CSS自定義屬性和@Property規(guī)則來簡化此過程的方法。

傳統(tǒng)方法需要為動畫的每個百分比都指定一個旋轉角度，這非常繁瑣。而通過自定義屬性，我們可以只定義起始和結束角度，瀏覽器會自動計算中間的過渡。

具體實現(xiàn)步驟如下：

首先，定義一個自定義屬性–rotate-angle，并使用@property規(guī)則指定其語法為，表示該屬性接受角度值。 inherits: false 表示該屬性不繼承父元素的值，initial-value: 0deg 設置初始值為0度。

立即學習“前端免費學習筆記（深入）”；

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

接下來，在@keyframes規(guī)則中，只需定義動畫起始(0%)和結束(100%)時的旋轉角度：

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

最后，在目標元素的樣式中，使用rotate屬性并通過var(–rotate-angle)引用自定義屬性：

#el {   rotate: var(--rotate-angle);   animation: rotate 3s linear; }

這樣，動畫運行時，–rotate-angle的值會平滑地從0度變化到360度，實現(xiàn)完整的旋轉效果。 這種方法使代碼更簡潔、更易于維護，同時提升了動畫的流暢性。