如何“跳变”动画中的单个变换值？

Question

我正在尝试在动画中使转换函数值“跳转”。

我的@keyframes规则中有3个弯角，每个弯角都具有transform属性。我希望比例从first到third百分数从0.5变为1，与颜色变化相同，而不是从第一变化为第二。

我知道是因为转换在第二个百分比中隐式地应用了scale(1)。

是否有可能不必创建多个动画就能做到这一点？

.block {
  background-color: #333;
  height: 150px;
  width: 150px;
  margin: 100px;
  animation: rolling 3s forwards infinite;
}
@keyframes rolling {
  33% {
    background: green;
    transform: scale(0.5);
  } 66% {
    transform: translate(50%);
  } 100% {
    background: red;
    transform: scale(1) translate(100%);
  }
}

<div class="block"></div>

Answer 1

您可以手动添加scale值

.block {
  background-color: #333;
  height: 150px;
  width: 150px;
  margin: 100px;
  animation: rolling 3s forwards infinite;
}

@keyframes rolling {
  33% {
    background: green;
    transform: scale(0.5);
  } 66% {
    transform: scale(0.75) translate(50%);
  } 100% {
    background: red;
    transform: scale(1) translate(100%);
  }
}

<div class="block"></div>