The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

CSS3 transition: color using details[open] selector

  • # January 4, 2013 at 4:10 pm

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

    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?


    # January 7, 2013 at 10:26 am

    I should note that this demo only works in Chrome.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed