css动画：巧妙简化旋转角度百分比设置
在CSS动画中，旋转动画通常需要为每个关键帧指定具体的旋转角度和百分比。例如：
@keyframes rotate360 { 0% { --rotate-angle: 0deg; } 100% { --rotate-angle: 360deg; } }
这种方法在角度变化复杂时，代码会变得冗长且难以维护。 有没有更简洁的方案呢？ 答案是肯定的！我们可以利用CSS自定义属性和calc()函数来实现。
首先，定义一个自定义属性–rotate-angle，并指定其语法为角度类型：
@property --rotate-angle { syntax: '<angle>'; 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的中间值，从而实现平滑的旋转效果。
这种方法避免了手动指定每个百分比点的旋转角度，使代码更简洁、易于维护和理解，同时保持了动画的流畅性。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
