Is there a way for -webkit-animtion-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.


When you want different easing functions to apply to different aspects of an animation you should separate out your animations by nesting your content in two divs.

In this case, you should create a parent div to apply a movement animation to, and a child div to apply the opacity animation to. The opacity animation should have an easing curve: linear, and the movement animation should have whatever easing function looks best to you. However, I would repeat what Duopixel says about mixing easing curves and fixed checkpoints - in this case you shouldn't actually need animations, just two 0%:100% animations - one for the parent and one for the child div.

Having done a lot of CSS3 animation, I wrote this guide for our Sencha Animator product - it has some helpful general information on how to get complex animations working with CSS3 - even if you don't want to use the tool.

Tags:

Css

Webkit