html - @keyframes 不适用于 %

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%，效果很好！