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

问题描述

我对动画有点陌生，所以如果我在这里错过了一个巨大的概念，请原谅我.我需要为指向曲线上某个点的箭头设置动画，为方便起见，我们只说它是三次曲线.箭头沿着曲线的线移动，始终指向其下方的几个像素.

I'm a bit new to animation, so forgive me if I'm missing a huge concept here. I need to animate an arrow that is pointing to a point on a curve, let's just say it's a cubic curve for the sake of this post. The arrow moves along the curve's line, always pointing a few pixels below it.

所以我要做的是使用CSS3在曲线的直线上设置关键帧:

So what I did, is I setup keyframes along the curve's line using 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:easy-in运行此动画时，它将缓动应用于每个单独的关键帧，这绝对不是我想要的.我希望缓动效果适用于整个动画.

However, when I run this animation using -webkit-animation-timing-function: ease-in, it applies that easing to each individual keyframe, which is definitely not what I want. I want the easing to apply to the entire animation.

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

Is there a different way that I should be doing this? Is there some property to apply the easing to the entire sequence rather than each keyframe?

推荐答案

您不能在一系列关键帧上应用缓动函数，因为您要专门告诉对象在特定时间位于特定点.例如，如果您应用了一系列关键帧的缓动功能，则该对象将以其25％的速度位于所需的检查点"后面，并最终加速直至达到100％.

You can't apply an easing function over a series of keyframes because you're specifically telling the object to be at a specific point at a specific time. If you applied, say, an ease-in over a series of keyframes, then at 25% the object would behind it's required "checkpoint", eventually accelerating until catching up at 100%.

如果您的点或多或少等距，则可以应用:

If your points are more or less equidistant, you can apply:

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

，如果有点机器人的话，您的动画看起来会更好一些.

and your animation will look more more less good, if a little robotic.

一种更自然的方法是加速，保持速度，然后刹车":

A more natural approach would be to accelerate, maintain speed, and then "brake":

 @-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沿路径支持动画，则不需要这些关键帧，并且将缓动应用于仅两个关键帧也将没有问题.

If webkit supported animations along a path you wouldn't need these keyframes and you would have no trouble applying the easing to only two keyframes.

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