olanod olanod - 28 days ago 17
CSS Question

Transitioning between open close in details element

Is it possible to animate the transition between the open/close state of the

<details>
element with just CSS?

Answer

No, not currently.

From http://html5doctor.com/the-details-and-summary-elements/, "...if you could use CSS transitions to animate the opening and closing, but we can’t just yet." (There is a comment at HTML5 doctor near the end, but it appears to require JS to force the CSS animation.)

It is possible to use different styles based on whether it's opened or closed, but transitions don't "take" normally. See http://codepen.io/morewry/pen/gbJvy.

This kind of fakes it:

CSS (Limited support & will need to add prefixes)

/* http://daneden.me/animate/ */
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-1.25em);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.detailsanim[open] {
    animation-name: fadeInDown;
    animation-duration: 0.5s;
}

HTML

<details class="detailsanim">
    <summary>CSS Animation - Summary</summary>
    Try using [Dan Eden's fadeInDown][1] to maybe fake it a little.  Yay, some animation.
</details>

PS: Only tested in Chrome. Hear FF still doesn't support details in general.

(You can use keyframe animations to do all sorts of other animations for open. I've chosen fadeInDown for illustration purposes only. It is a reasonable choice which will give a similar feel if you do not want to add extra markup or will not know the height of the contents. Your options are, however, not limited to this.)