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?