CSS动画中如何用简写方法让旋转角度随百分比进度变化？

css动画中简写旋转角度百分比

在css动画中，您希望自定义属性--rotate-angle的值随着百分比进度而增加。尽管可以使用逐个百分比值的方法，但还有一种简写方法。

为了简化编写，可以将自定义属性定义为角度属性。

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

然后，在动画中使用以下代码：

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

  100% {
    --rotate-angle: 360deg;
  }
}

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

这样，旋转动画即可根据百分比进度平滑进行。该方法消除了逐个定义每个百分比的需要，从而使代码更加简洁。