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;
}

然后，在关键帧动画中，我们只需定义起始和结束角度：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

立即学习“前端免费学习笔记（深入）”；

@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的中间值，从而实现平滑的旋转效果。

这种方法避免了手动指定每个百分比点的旋转角度，使代码更简洁、易于维护和理解，同时保持了动画的流畅性。