是否有一种方法可以将-webkit-animtion-timing-function应用于整个动画而不是每个关键帧？

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%时,对象将在它后面需要"检查点",最终加速直到达到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支持沿着路径的动画,则不需要这些关键帧,并且您可以毫不费力地将缓动应用于仅两个关键帧.