CSS動畫是否不遵循關鍵幀中指定的規則？

Question

碼筆

<div></div>

html, body {
  margin: 0;
  padding: 0;
}

div {
  width: 150px;
  height: 100px;
  background: black;
  transform: translate(100px, 50px) rotate(140deg);
  animation: circle-top 1.5s ease-in-out forwards;
}

@keyframes circle-top {
  10% {
    transform: translate(500, -190px) rotate(120deg);
  }
  30% {
    transform: translate(300, -150px) rotate(100deg);
  }
  70% {
    transform: translate(100, -50px) rotate(360deg);
  }
  90% {
    transform: translate(50, -30px) rotate(30deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}

我在關鍵幀中指定了一些隨機旋轉。 顯然，動畫沒有遵循規則，因為它看起來是如此平滑，而不是我指定的方式。

Answer 1

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

第一個轉換參數的無效值也會導致大多數關鍵幀也變為無效。

CSS中的每個長度始終需要一個單位，除非該值恰好為0。