CSS动画是否不遵循关键帧中指定的规则？

html，正文{
保证金：0；
填充：0；
}
div{
宽度：150px；
高度：100px；
背景：黑色；
变换：平移（100px，50px）旋转（140度）；
动画：旋转顶部1.5s，向前缓进缓出；
}
@关键帧圆顶{
10% {
变换：平移（500，-190px）旋转（120度）；
}
30% {
变换：平移（300，-150像素）旋转（100度）；
}
70% {
变换：平移（100，-50px）旋转（360度）；
}
90% {
变换：平移（50，-30px）旋转（30度）；
}
100% {
变换：平移（0，0）旋转（0）；
}
}

我在关键帧中指定了一些随机旋转。显然，动画没有遵循规则，因为它看起来很平滑，而不是我指定的方式

@keyframes circle-top {
  10% {
    transform: translate(500, -190px) rotate(120deg);
                      /* !!! */ 
  }

第一个translate参数的无效值也会导致大多数关键帧无效

CSS中的每个长度都需要一个单位，除非值恰好为0

第一个translate参数的无效值也会导致大多数关键帧无效

CSS中的每个长度都需要一个单位，除非值恰好为0

@keyframes circle-top {
  10% {
    transform: translate(500, -190px) rotate(120deg);
                      /* !!! */ 
  }