W3C home > Mailing lists > Public > www-style@w3.org > January 2010

Re: [css3-animation] keyframes without animations

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Wed, 13 Jan 2010 17:17:42 -0600
Message-ID: <dd0fbad1001131517y3f89e1a8lbb3fcbd7893b2e8d@mail.gmail.com>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:23 GMT