Transitioning between open close in details element

Question

Is it possible to animate the transition between the open/close state of the <details> element with just CSS?

Answer 1

No, not currently. Yes, but only if you know the height or can animate the font-size.

Originally, this wasn't the case. 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 was possible to use different styles based on whether it's opened or closed, but transitions didn't "take" normally. Today, however, the transitions do work if you know the height or can animate the font-size. See http://codepen.io/morewry/pen/gbJvy for examples and more details.

This was the 2013 solution that kind of fakes it:

CSS (May need to add prefixes)

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

HTML

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

This works today:

CSS (May need to add prefixes)

.details-animated {
  transition: height 1s ease;
}
.details-animated:not([open]) { height: 1.25em; }
.details-animated[open] { height: 3.75em; }

PS: Only tested in Chrome. Hear FF still doesn't support details in general. IE and Edge prior to version 79 still don't support details.

(You can use keyframe animations or transitions 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 are unable to add extra markup or will not know the height of the contents. Your options are, however, not limited to this: see the comments on this answer that include two alternatives, including the font-size approach.)

Answer 2

My short answer is : you can not transition between summary and the rest of the details content.

BUT!

You can do some nice transition inside the summary between the selector details and details[open]

details{
  position: relative;
  width: 100px;height: 100px;
  perspective: 1000px;
}
div{
  position: absolute;
  top: 20px;
  width: 100px;height: 100px;
  background: black;
}
details .transition{
  transition: 1s linear;
  transform-origin: right top;
  ;
}
details[open] .transition{
  transform: rotateY(180deg);
  background: orangered;
}

<details>
  <summary>
    <div></div>
    <div class="transition"></div>
  </summary>
</details>

NB : I answer this because it was the first result from googling on this!

Answer 3

Given the height has to snap at some point I prefer to start to animate the height and then snap. If your lucky enough to have all the elements a similar height this solution can be quite effective. (you do need a div inside your details elements though)

@keyframes slideDown {
    0% {
        opacity: 0;
        height: 0;
    }
    100% {
        opacity: 1;
        height: 20px; /* height of your smallest content, e.g. one line */
    }
}
details {
    max-width:400px;
}
details[open]>div {
    animation-name: slideDown;
    animation-duration: 200ms;
    animation-timing-function:ease-in;
    overflow:hidden;
}

see http://dabblet.com/gist/5866920 for example