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

【问题标题】：Different timing functions for different parts of css3 keyframe animation? (accurate bounce)css3关键帧动画不同部分的不同计时功能？（准确反弹）
【发布时间】：2017-03-10 18:24:45
【问题描述】：

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

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

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

【问题讨论】：

您可以在每个关键帧上使用属性animation-timing-function。这控制了各个关键帧从开始到结束的功能。
是的！但是有没有办法在（例如）0% -> 20% 的关键帧而不是整个东西上使用它？比如使用 'ease-in' 表示 0% -> 20%，然后使用 'ease-out' 表示 20% -> 30% 等等。
是的，你可以为每个关键帧指定函数而不是整个动画-for example
这正是我想要的。非常感谢！如果你想发表，我会接受你的回答。

标签： css animation

【解决方案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;
}

&lt;div class="ball"&gt; &lt;/div&gt;

【讨论】：