-webkit-animtion-timing-function是否适用于整个动画而不是每个关键帧？

我有点新动画，所以原谅我，如果我在这里错过了一个巨大的概念。我需要为箭头指向一个点的动画，我们来说说这是一个三次曲线。箭头沿着曲线的线移动，总是指向其下方几个像素。

所以我做了，是使用CSS3沿着曲线的线设置关键帧：

@-webkit-keyframes ftch {
 0% {
     opacity: 0;
     left: -10px;
     bottom: 12px;
 }

25% {
    opacity: 0.25;
    left: 56.5px;
    bottom: -7px;
 }

 50% {
    opacity: 0.5;         
    left: 143px;
    bottom: -20px;
 }

 75% {
    opacity: 0.75;
    left: 209.5px;
    bottom: -24.5px;
 }

 100% {
     opacity: 1;
     left: 266px;
     bottom: -26px;
 }

}

然而，当我使用-webkit-animation-timing-function：ease-in运行这个动画时，它适用于每个关键帧的宽松，这绝对不是我想要的。我想让宽松适用于整个动画。

有不同的方式我应该这样做吗？有没有一些属性可以将缓解应用于整个序列，而不是每个关键帧？

解决方法

您不能在一系列关键帧中应用缓动功能，因为您具体告诉对象在特定时间处于特定点。如果你应用了一系列关键帧，那么在25％的对象将需要“检查点”，最终加速到100％。

如果您的积分或多或少等距离，您可以申请：

.animatedobject {
  -webkit-animation-timing-function: linear;
}

而且你的动画看起来会越来越好，如果有一点机器人。

更自然的方法是加速，保持速度，然后“刹车”：

@-webkit-keyframes ftch {
 0% {
     opacity: 0;
     left: -10px;
     bottom: 12px;
    -webkit-animation-timing-function: ease-in;
 }

25% {
    opacity: 0.25;
    left: 56.5px;
    bottom: -7px;
    -webkit-animation-timing-function: linear;
 }

 50% {
    opacity: 0.5;         
    left: 143px;
    bottom: -20px;
    -webkit-animation-timing-function: linear;
 }

 75% {
    opacity: 0.75;
    left: 209.5px;
    bottom: -24.5px;
    -webkit-animation-timing-function: linear;
 }

 100% {
     opacity: 1;
     left: 266px;
     bottom: -26px;
    -webkit-animation-timing-function: ease-out;
 }
}

如果webkit支持沿着路径的动画，那么您将不需要这些关键帧，而将缓存应用到两个关键帧就没有任何麻烦。