How To Animate HTML Accordion Opening

Animating an HTML Accordion is quite straightforward once you know how to target the pertinent elements.

details[open] summary ~ * {
  animation: accordion .5s ease-in-out;
}

For the animation, we target the opened state and any elements inside details that follow the summary tag - hence ~ *.

@keyframes accordion {
  from {
    opacity: 0;
    margin-top: -10px;
  }
  to {
    opacity: 1;
    margin-top: 15px;
  }
}

The keyframes themselves are nothing special: some simple vertical movement and change in opacity. To see everything in action, check out my Codepen snippet.