Question

Codepen

<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);
                      /* !!! */ 
  }

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

CSS中的每个长度总是需要一个单位，除非该值恰好是0。

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

1 个答案: