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

Re: CSS Transitions Feedback

From: Lachlan Hunt <lachlan.hunt@lachy.id.au>
Date: Wed, 14 Jan 2009 14:36:22 +0100
Message-ID: <496DEA56.6020503@lachy.id.au>
To: Dean Jackson <dino@apple.com>
Cc: www-style@w3.org, Rune Lillesveen <rune@opera.com>

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:

transition-property: border-width, color;
transition-duration: 1s, 2s;

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>]? ||

e.g. transition: color 2s/1s;

This would have a 2 second duration with a 1 second delay.

Lachlan Hunt - Opera Software
Received on Wednesday, 14 January 2009 13:37:05 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:38:23 UTC