How To Add CSS3 Transition With HTML5 details/summary tag reveal?

Question

Using just CSS3, is there a way to add a nice fade-in and slide-from-left transition effect on a DETAILS/SUMMARY reveal?

For a demo of this new tag, see this demo:

details {   transition:height 3s ease-in; }

<details>   <summary>Copyright 1999-2014.</summary>   <section>     <p> - by Refsnes Data. All Rights Reserved.</p>     <p>All content and graphics on this web site are the property of the company Refsnes Data.</p>   </section> </details>

In my case, after the summary tag, I put all other content in its own section tag so that I could style it because summary:after selector didn't seem to work. I tried using CSS3 transitions on height for the section and details tag, but it didn't help.

Answer 1

This should fix it.

details[open] summary ~ * {   animation: sweep .5s ease-in-out; }  @keyframes sweep {   0%    {opacity: 0; margin-left: -10px}   100%  {opacity: 1; margin-left: 0px} }

<details>   <summary>Copyright 1999-2014.</summary>   <p> - by Refsnes Data. All Rights Reserved.</p>   <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details>

Some credit goes to Andrew for pointing this out. I adapted his answer. Here's how this works. By adding the [open] attribute on the DETAILS tag, it only fires the animation keyframe when clicked. Then, by adding SUMMARY ~ * it means "all elements after the SUMMARY tag" so that the animation applies to those, and not the SUMMARY element as well.

Answer 2

In addition to Volomike's answer, it would be possible to change margin-left to transform: translateX() for performance reasons.

details[open] summary ~ * {   animation: sweep .5s ease-in-out; }  @keyframes sweep {   0%    {opacity: 0; transform: translateX(-10px)}   100%  {opacity: 1; transform: translateX(0)} }

<details>   <summary>Copyright 1999-2014.</summary>   <p> - by Refsnes Data. All Rights Reserved.</p>   <p>All content and graphics on this web site are the property of the company Refsnes Data.</p> </details>