css3关键帧动画的不同部分有不同的计时功能？ （精确反弹）

Question

这可能吗？我试图重新创建一个落在屏幕上的球，我有一个这样的动画：

@keyframes bounce {
  20%, 40%, 60%, 74%, 84%, 92%, 100% {
    transform: translate(0, 0);
  }
  0% {
    transform: translate(0, -100vh);
  }
  30% {
    transform: translate(0, -40vh);
  }
  50% {
    transform: translate(0, -20vh);
  }
  68% {
    transform: translate(0, -10vh);
  }
  80% {
    transform: translate(0, -5vh);
  }
  88% {
    transform: translate(0, -2vh);
  }
  96% {
    transform: translate(0, -1vh);
  }
}

这样，当这样实现时：

.ball {
  animation: bounce 3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s 1 normal forwards;
}

生成如下所示的内容：

这是.. 好的，但并不理想。我更喜欢做类似的事情：

但是为了做到这一点，我需要为初始0-＆gt;设置不同的定时功能。与其他人相比，增加了20％。有没有办法为关键帧动画的不同部分做不同的计时功能？或者也许是一种不同的方式来获得我没想到的准确弹跳动画？任何帮助将不胜感激！

编辑添加了一个小提琴here。

Answer 1

您可以指定每个关键帧，而不是为整个动画指定timing function。该函数表示如何从相应关键帧的开头到结尾插值。

以下是向关键帧ease添加20%, 40%, 60%, 74%, 84%, 92%, 100%功能的示例。

＆＃13;

＆＃13;

@keyframes bounce {
  20%, 40%, 60%, 74%, 84%, 92%, 100% {
    transform: translate(0, 0);
    animation-timing-function: ease;
  }
  0% {
    transform: translate(0, -100vh);
  }
  30% {
    transform: translate(0, -40vh);
  }
  50% {
    transform: translate(0, -20vh);
  }
  68% {
    transform: translate(0, -10vh);
  }
  80% {
    transform: translate(0, -5vh);
  }
  88% {
    transform: translate(0, -2vh);
  }
  96% {
    transform: translate(0, -1vh);
  }
}

.ball {
  background: #ff0000;
  border-radius: 50%;
  position: absolute;
  top: 500px;
  width: 50px;
  height: 50px;
  animation: bounce 3s cubic-bezier(0.895, 0.03, 0.685, 0.22) 0s 1 normal forwards;
}

＆＃13;

<div class="ball"> </div>

＆＃13;

＆＃13;

＆＃13;