有没有办法让动画计时功能应用于整个动画而不是每个关键帧？ [英] Is there a way for animation-timing-function to apply to the entire animation instead of each keyframe?

问题描述

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

我所做的是使用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支持沿路径的动画，您将不需要这些关键帧，并且只将缓动应用于两个关键帧将没有问题。

这篇关于有没有办法让动画计时功能应用于整个动画而不是每个关键帧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！