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%.

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.

Yeah, I considered this as a solution but it seems overly complex, trying to figure out the placement/time of each one along the path can be very time consuming. However, this is the best answer here. – Ken Sykora Dec 27 '10 at 16:41.

Some reference love for you: w3.org/TR/css3-animations/ More specifically: w3.org/TR/css3-animations/#timing-functions-for-keyframes- You may want to do animation stacking, such as move to one location, then another, then another in multiple keyframe animations rather than just one.

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.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.