@keyframes не работает с%

VG__ спросил: 28 апреля 2018 в 09:35 в: html5

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

1 ответ

Prabin Sapal ответил: 29 апреля 2018 в 07:52
.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, он отлично работает!