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

by

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.

More Related Contents:

  1. CSS3 transition doesn’t work with display property [duplicate]
  2. CSS Transition – eases in but doesn’t ease out?
  3. Why does my Transform snap back?
  4. elements are not centered aligned inside the wrapper and when I set the width of the wrapper it goes out of the browser width..any solution?
  5. How can I center text (horizontally and vertically) inside a div block?
  6. Why not use tables for layout in HTML? [closed]
  7. How do I auto-resize an image to fit a ‘div’ container?
  8. How can I position my div at the bottom of its container?
  9. Can I create a div with a Curved bottom?
  10. How to make a HTML Page in A4 paper size page(s)?
  11. Best Practices & Considerations when writing HTML Emails [closed]
  12. Is there a way to style part of an input field’s value? [duplicate]
  13. Add border-bottom to table row
  14. How to set maximum height for table-cell?
  15. How does this CSS produce a circle?
  16. CSS fixed width in a span
  17. Chrome rendering issue. Fixed position anchor with UL in body
  18. Why is an element with position: fixed moving with a non-positioned sibling?
  19. flex-grow not working in column layout
  20. Min-width and max-height for table attributes
  21. How to make select elements shrink to max-width percent style within fieldset
  22. Height of flex container not working properly in Safari
  23. Overlapping/overlaying multiple inline images
  24. bootstrap 3 to bootstrap 4 cols no longer horizontally aligned [duplicate]
  25. Border style do not work with sticky position element
  26. Using z-index to get div above another div
  27. How to make a DIV not wrap?
  28. What is the difference between applying css rules to html compared to body?
  29. Twitter Bootstrap: Center Pills
  30. When to use line breaks vs CSS positioning?

Leave a Comment