@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>

Эй, просто установите от 0% до 100% в @keyframes car1, все работает отлично!