CSS动画：如何简写旋转角度的百分比?

Question

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

我希望 --rotate-angle的值是随百分比进度增加；
除了0%{}..1%..2%...100%{} 这样，能简写吗？

Answer 1

将自定义属性定义为角度属性

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

Answer 2

不需要一步一步写, 只需要写出需要特别设置的关键帧就行了, 比如需要旋转360度, 0% 设置为0, 100%设置为360就行, 同理想先右在下, 可以

<style>
  @keyframes rotate360 {
    0% {
      left: 0;
      top: 0;
    }
    50% {
      left: 20px;
      /* top: 0; */
    }
    100% {
      left: 20px;
      top: 30px;
    }
  }

  div {
    width: 100px;
    height: 100px;
    background-color: aqua;
    cursor: pointer;
    position: relative;
  }

  div:hover {
    animation-name: rotate360;
    animation-duration: 1s;
    background-color: beige;
  }
</style>

<div></div>

浏览器会根据所写的关键帧自动计算

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@keyframes#%...