Grow your CSS skills. Land your dream job.

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:

    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

    # 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.

*May or may not contain any actual "CSS" or "Tricks".