- From: Tab Atkins Jr. <jackalmage@gmail.com>
- Date: Wed, 13 Jan 2010 17:17:42 -0600
- To: Sylvain Galineau <sylvaing@microsoft.com>
- Cc: Nemeséri András <andris@nemeseri.com>, "www-style@w3.org" <www-style@w3.org>
On Wed, Jan 13, 2010 at 5:02 PM, Sylvain Galineau <sylvaing@microsoft.com> wrote: >> >> If you set the animation-duration to 0 there will be no movement at >> all. Because the animation "loop" will be finished in 0 second. > Hmm. That was not my expectation based on the semantics of zero duration > with transitions but you seem to be right. Zero means the animation never > starts vs. going to the last frame immediately. > > A zero second completion should not result in no animation of the property > value, it should result in an immediate update i.e. by default, CSS properties > have a zero duration and take their new value as you update them. The spec does indeed specify that a duration of 0 should result in an immediate update. http://www.w3.org/TR/2009/WD-css3-transitions-20090320/#the-transition-duration-property- If you're seeing anything different, that's a bug in the browser. >> You said: >> "tou can set animation-duration of 0 and animation-delay of 1s on each >> frame" >> >> How can I set animation-duration or animation-delay on each frame? The >> specification says that the "animation-timing-function" is the only >> animation related css property which can be set on keyframes: >> http://www.w3.org/TR/css3-animations/#animation-timing-function_tag > > > My bad, yes you're of course correct. The duration - and the other properties - > apply to the entire animation. You will thus be unable to achieve the effect > you want without specifying a positive duration. > > Going through these three steps in a way that is visible to the user not only > implies but requires a specific duration anyway. > > So what you want to control is the easing function i.e. you want one that updates > the property value at the very end of the frame period. I am not sure whether this > can be specified using the cubic-bezier() function... You could approximate a 3-step animation like Andras wants with a cubic-bezier, but it would change if you changed your desired durations. A better idea is to introduce a "discrete" or "step" timing function that handles this properly, jumping from value to value directly. ~TJ
Received on Wednesday, 13 January 2010 23:18:10 UTC