CSS3 transition: color using details[open] selector

[iOnline247]

I’ve been through a few different approaches on this one and this is the best I’ve done so far:

http://codepen.io/iOnline247/pen/ebycA

The link within the example is the behavior I’m trying to recreate. I want to fire the transition upon opening the

element. I know I’m using an animation currently and I’m fine with using one, if I can get it to work.

I switched from transition because it appears to not work with an attribute selector: details[open] > summary { bleh }
However an animation will fire on that. It’s almost there with the animation, but on page load, the animation fires and make it look wonky. If at all possible, I’d love for this to be solved using only CSS. Is it possible?

Cheers,
Matthew

[iOnline247]

I should note that this demo only works in Chrome.

[Author]

Posts