@keyframes 不适用于 %答案

【问题标题】：@keyframes doesn't work with %@keyframes 不适用于 %
【发布时间】：2018-05-23 17:32:12
【问题描述】：

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

【问题讨论】：

标签： html css css-animations

【解决方案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%，效果很好！

【讨论】：