How To Add CSS3 Transition With HTML5 details/summary tag reveal?
<p>Using just CSS3, is there a way to add a nice fade-in and slide-from-left transition effect on a <code>DETAILS</code>/<code>SUMMARY</code> reveal?</p>
<p>For a demo of this new tag, see this demo:</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>details {
  transition:height 3s ease-in;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;details&gt;
  &lt;summary&gt;Copyright 1999-2014.&lt;/summary&gt;
  &lt;section&gt;
    &lt;p&gt; - by Refsnes Data. All Rights Reserved.&lt;/p&gt;
    &lt;p&gt;All content and graphics on this web site are the property of the company Refsnes Data.&lt;/p&gt;
  &lt;/section&gt;
&lt;/details&gt;</code></pre>
</div>
</div>
</p>
<p>In my case, after the <code>summary</code> tag, I put all other content in its own <code>section</code> tag so that I could style it because <code>summary:after</code> selector didn't seem to work. I tried using CSS3 transitions on height for the <code>section</code> and <code>details</code> tag, but it didn't help.</p>