Re: CSS Transitions Feedback

Dean Jackson wrote:
> On Wed, 10 Dec 2008, Lachlan Hunt wrote:
>> Does 'transition-property' support the use of shorthands properties, or
>> will it be required to have each individual property listed separately?
> 
> Originally we had intended shorthand properties to be excluded, but a
> few people have asked for it, and it will make life easier for authors.

Our current internal builds don't support shorthands, but this seems 
acceptable to us.

> I'll add to the specification to say that shorthand properties should
> be supported.
> 
>> 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;

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

-- 
Lachlan Hunt - Opera Software
http://lachy.id.au/
http://www.opera.com/

Received on Wednesday, 14 January 2009 13:37:05 UTC