533352 - Support 'transition-delay' on non-animatable properties

Status: NEW

(Core :: CSS Parsing and Computation, enhancement)

Description

[d]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; sv-SE; rv:1.9.3a1pre) Gecko/20091205 Minefield/3.7a1pre
Build Identifier: 

Based on:

http://lists.w3.org/Archives/Public/www-style/2009Dec/0027.html

I think we should do a "test implementation" of this with several properties, although the one I can see as most useful is the display property.

Reproducible: Always

Comment 1

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

If we did a test implementation, it would be for all properties, based on the idea in bug 529934 comment 2, plus changes to the transition manager to handle transition-delay even when interpolation is not possible.

Comment 2

[Daniel Gredler]

I just wanted to chime in real quick with a user's perspective... I've been playing with transitions for the past week or so (for the Game On competition), and it would be very useful to be able to specify whether all-or-nothing, non-animatable changes (e.g. display:none <-> display:block) happen before or after other transitions take effect. Re-using the existing transition syntax makes sense -- I actually tried to use the transition-delay as proposed before digging into the MDC and W3C docs to find that this wasn't supported. You can see the sorts of hacks that are cropping up to work around this limitation here: http://stackoverflow.com/questions/3331353/css-3-transitions-on-the-display-property

Comment 3

[mahpooya]

I think a new css property like 'nonanimatable-transition' could achieve this.
For example something like:

.myAnimation {
	transition: all 7s cubic-bezier(0.00,1.00,0.00,1.00) 1s;
	nonanimatable-transition: background-image 8s;
	background-image: url("./img/expand.png");
	background-color: #ff0000;
}

.myAnimation:hover {
	background-image: url("./img/collapse.png");
	background-color: #0000ff;
}

It only need contain nonanimatable-transition-property and nonanimatable-transition-delay, not need timing-function or duration.
The 'transition' property do care of animatable properties with a timing function and delay and duration.
The 'nonanimatable-transition' property do care of nonanimatable properties with only a delay.