css - 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-> 20% 设置不同的计时功能。有没有办法对关键帧动画的不同部分执行不同的计时功能？或者也许是一种不同的方式来获得我没有想到的准确弹跳动画？任何帮助，将不胜感激!

编辑:添加了 fiddle here .

Answer 1

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

这是添加 ease 的示例关键帧的函数20%, 40%, 60%, 74%, 84%, 92%, 100% .

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

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