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

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.