Re: [css3-animations] :animating or :transitioning pseudo-class

I know there's plenty of discussion around animations and transitions and having done a search on the topic, I saw this briefly mentioned last October and didn't see any kind of follow-up to it.

I'd love to see an :animating and/or :transitioning pseudo-class. It would help in defining things like display:block during transitions but could also be used to define how other elements behave while an element is transitioning. 

.dialog {
	opacity:1;
	transition: opacity 1s;
}

.dialog.hidden {
	opacity:0;
	display: none;
}

.dialog:transitioning {
	display:block !important;
}

Or for related elements:

.dialog:transitioning > button {
	pointer-events:none; // prevent double click while the dialog fades out
}

The biggest catch I see to this is trying to define animation or transitions inside the pseudo-class.

.dialog:transitioning {
	transition: opacity 2s;
}

Interested in hearing more feedback on this idea.

Jonathan.


On 2011-10-02, at 3:15 PM, Andrew Fedoniouk wrote:

> As far as I can see :animating pseudo-class or something like that
> is the only reasonable solution. As animation per se is a "third state of
> CSS matter".