有没有办法让动画计时功能应用于整个动画而不是每个关键帧？

我对动画有点陌生，如果我错过了一个重要的概念，请原谅。我需要制作一个指向曲线上一点的箭头动画，为了这个帖子，我们假设它是一条三次曲线。箭头沿曲线的线条移动，始终指向曲线下方的几个像素。

我所做的是使用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-动画-计时-函数：缓入运行此动画时，它会将缓动应用到每个单独的关键帧，这绝对不是我想要的。我希望缓动应用于整个动画。

有没有其他我应该这样做的方式？是否有某些属性可以将缓动应用于整个序列，而不是每个关键帧？

---

解决方案

您不能对一系列关键帧应用缓动功能，因为您专门告诉对象在特定时间处于特定点。比方说，如果你在一系列关键帧上应用了缓入，那么在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支持沿路径的动画，您将不需要这些关键帧，并且只将缓动应用于两个关键帧将没有问题。