CSS动画：巧用简写实现旋转角度百分比变化
在CSS动画中，精确控制旋转角度往往需要逐个百分比设定关键帧，十分繁琐。本文提供一种简便方法，利用CSS自定义属性和@property规则，轻松实现旋转角度的百分比自动递增。
核心思路是定义一个自定义属性表示旋转角度，并使用@property规则声明其类型和初始值。然后，在@keyframes中仅需定义起始和结束角度，浏览器会自动计算中间值。
代码示例如下：
@property --rotate-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
@keyframes rotation {
0% { --rotate-angle: 0deg; }
100% { --rotate-angle: 360deg; }
}
#element {
animation: rotation 3s linear;
transform: rotate(var(--rotate-angle));
}
代码解释：
立即学习“前端免费学习笔记（深入）”；
-
@property --rotate-angle: 定义自定义属性--rotate-angle，指定其值为角度值(0deg。 -
@keyframes rotation: 定义名为rotation的动画，起始状态(0%)旋转角度为0deg，结束状态(100%)旋转角度为360deg。 浏览器会自动平滑过渡。 -
#element: 目标元素应用rotation动画，持续时间3秒，采用线性动画效果(linear)。transform: rotate(var(--rotate-angle))使用自定义属性控制旋转角度。
通过此方法，无需手动设置每个百分比的关键帧，即可实现旋转角度随时间百分比线性递增的效果，大大简化了代码，提高了效率。
