css - 有没有一种方法可以将动画计时功能应用于整个动画而不是每个关键帧？

Question

我对动画有点陌生，所以如果我在这里遗漏了一个大概念，请原谅我。我需要为指向曲线上一点的箭头制作动画，为了这篇文章，我们只说它是一条三次曲线。箭头沿着曲线移动，始终指向曲线下方的几个像素。

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

我应该采用其他方式吗？是否有一些属性可以将缓动应用于整个序列而不是每个关键帧？

Answer 1

您不能在一系列关键帧上应用缓动函数，因为您是专门告诉对象在特定时间处于特定点。例如，如果您在一系列关键帧上应用了缓入，那么在 25% 时对象将落后于它所需的“检查点”，最终加速直到 catch 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 支持沿路径的动画，则不需要这些关键帧，并且仅将缓动应用于两个关键帧就不会遇到问题。