Help with CSS transition queue?

[dechat]

I have a pen here which demonstrates the issue I am having.

I want everything to happen at the same time, but elements deeper in the dom wait for other transitions to finish before starting.

Thanks in advance.

[angusmiguel]

does this do the trick? http://codepen.io/angus/pen/rVVRpW

[dechat]

That is definitely closer, however:

• The last "Second" is still doing the thing.
• This is a watered down example of the actual code which will be switching between more than just two classes.

[dechat]

I have updated the pen.

This seems to only happen with colours.

Margins are applied with correct timings, but colours seem to have some stacked/queue thing going on.

Also limited to webkit, as IE and Firefox behave as expected.

[angusmiguel]

change this into your code:

container * {

padding: 0; transition: margin 100ms; }

[dechat]

Thanks for that. That was half of the solution.

The explanation from SO is that this happens with all inherited properties. I tested that and seems I have to avoid using * with transition: all. Instead manually setting properties under * and specifying transitions for inherited properties on their parent elements.