CSS动画：巧妙简化旋转角度百分比设置
在CSS动画中，旋转动画通常需要为每个关键帧指定具体的旋转角度和百分比。例如：
@keyframes rotate360 {
0% {
--rotate-angle: 0deg;
}
100% {
--rotate-angle: 360deg;
}
}
这种方法在角度变化复杂时，代码会变得冗长且难以维护。 有没有更简洁的方案呢？ 答案是肯定的！我们可以利用CSS自定义属性和calc()函数来实现。
首先，定义一个自定义属性--rotate-angle，并指定其语法为角度类型：
@property --rotate-angle {
syntax: '';
inherits: false;
initial-value: 0deg;
}
然后，在关键帧动画中，我们只需定义起始和结束角度：
立即学习“前端免费学习笔记（深入）”；
@keyframes rotate {
0% {
--rotate-angle: 0deg;
}
100% {
--rotate-angle: 360deg;
}
}
最后，在目标元素的样式中，使用calc()函数结合自定义属性和百分比来计算旋转角度：
#el {
transform: rotate(calc(var(--rotate-angle) * 100%)); /* 此处修正为更准确的计算方式 */
animation: rotate 3s linear;
}
calc(var(--rotate-angle) * 100%) 计算方式已修正，以确保旋转角度与动画进度百分比正确对应。 浏览器会自动计算动画过程中--rotate-angle的中间值，从而实现平滑的旋转效果。
这种方法避免了手动指定每个百分比点的旋转角度，使代码更简洁、易于维护和理解，同时保持了动画的流畅性。
