@keyframe不适用于%

Question

.car1只有在使用@keyframes的from & to时才会移动，但在使用%时不会移动。有人能解释一下为什么会这样吗？

​

.car1 {
  animation: car1 2s 2 forwards;
  position: absolute;
}

@keyframes car1 {
  from {transform: translateX(550px)}
  to {transform: translateX(-550px)}
}

.car2 {
  position: absolute;
  top: 0;
  animation: car2 2s 2 forwards;
}

@keyframes car2 {
  0% {top: 30px}
  25% {top: 130px}
  40% {top: 230px}
  75% {top: 330px}
}

<div class="car1">Car1</div>
<div class="car2">Car2</div>

​

Answer 1

​

.car1 {
  animation: car1 2s 2 forwards;
  position: absolute;
}

@keyframes car1 {
  0% {transform: translateX(550px)}
  100% {transform: translateX(-550px)}
}

.car2 {
  position: absolute;
  top: 0;
  animation: car2 2s 2 forwards;
}

@keyframes car2 {
  0% {top: 30px}
  25% {top: 130px}
  40% {top: 230px}
  75% {top: 330px}
}

<div class="car1">Car1</div>
<div class="car2">Car2</div>

嘿，只要在@keyframes car1中从0%设置为100%，它就可以正常工作！

​