Re: CSS Transitions Feedback

On Jan 14, 2009, at 5:36 AM, Lachlan Hunt wrote:

>>>
>>> e.g. Is this:
>>>
>>> transition-property: border-width;
>>>
>>> equivalent to this:
>>>
>>> transition-property: border-top-width, border-right-width,
>>> border-bottom-width, border-left-width;
>>>
>>> If so, then what effect does that have on the values for
>>> 'transition-duration' and 'transition-delay'?
>
> You seem to have missed answering this question.
>
> To clarify the issue, consider this example:
>
> transition-property: border-width, color;
> transition-duration: 1s, 2s, 3s, 4s, 5s;
>
> The issue is whether the first duration specified applies to all  
> four border-*-width properties, or whether the first four durations  
> specified are applied to each of them in a given order.  In the  
> first alternative, color would have a duration of 2s and the last  
> three durations would be effectively ignored; in the second it would  
> have a duration of 5s, with the first 4 applying to the border widths.
>
> I spoke with Rune and he said the first alternative would be the  
> most sensible, in which case, the following 2 examples would be  
> equivalent:
>
> 1)
> transition-property: border-width, color;
> transition-duration: 1s, 2s;
>
> 2)
> transition-property: border-top-width, border-right-width, border- 
> bottom-width, border-left-width, color;
> transition-duration: 1s, 1s, 1s, 1s, 2s;

Yes, we agree.

Just to make sure we are all thinking the same thing. In the following  
example:

transition-property: border;
transition-duration: 1s;

If I now apply a style rule "border-top-width: 2px", do you expect to  
see a transition?

>>> The definition for the shorthand 'transition' property is ambiguous
>>> because it defines that the <transition-duration> and <transition- 
>>> delay>
>>> values can be specified in any order, along with the
>>> <transition-property> and <transition-timing-function>.  However,  
>>> since
>>> both are spefied as times, the only way to distinguish these  
>>> properties
>>> is based on their order.  The WebKit implementation always treats  
>>> the
>>> first number as the duration and the second as the delay.
>> Yes. This should be clarified that the order is important for the  
>> duration
>> and delay.
>
> One possible solution is to use the same technique used for the 'font'
> shorthand for distinguishing between font-size and line-height.   
> Namely,
> using a slash as a separator between the two, like this:
>
> <transition-property> || <transition-duration>[ / <transition-delay>]?
> || <transition-timing-function> [, [<transition-property> ||
> <transition-duration>[ / <transition-delay>]? ||
> <transition-timing-function>]]*
>
> e.g. transition: color 2s/1s;
>
> This would have a 2 second duration with a 1 second delay.

This seems like a good idea. I'll add it to the specification.

Dean

Received on Wednesday, 14 January 2009 18:12:42 UTC