Is there a way for animation-timing-function to apply to the entire animation instead of each keyframe?

Question

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.

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;      } } 

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?

Answer 1

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;  } } 

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.