Open & Close Transitions with <details>

index.html

<style type="text/css">
  details {
    inline-size: 50ch;

    @media (prefers-reduced-motion: no-preference) {
      interpolate-size: allow-keywords;
    }

    &::details-content {
      opacity: 0;
      block-size: 0;
      overflow-y: clip; 
      transition: content-visibility 1s allow-discrete,
                  opacity 1s,
                  block-size 1s;
    }

    &[open]::details-content {
      opacity: 1;
      block-size: auto;
    }
  }


  @layer support {
    * {
      box-sizing: border-box;
      margin: 0;
    }

    html {
      block-size: 100%;
      color-scheme: dark light;
    }

    body {
      min-block-size: 100%;
      font-family: system-ui, sans-serif;

      display: grid;
      place-content: center;
    }

    summary {
      cursor: pointer;
    }
  }
</style>

<h1>Open & Close Transitions with &lt;details&gt;</h1>
<a href="https://nerdy.dev/open-and-close-transitions-for-the-details-element?utm_source=feedly" target="_blank" rel="noopener noreferrer">
  From: Adam Argyle
</a>
<hr/>
<details>
  <summary>Details interpolation example</summary>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid dolores, distinctio ipsum veritatis magni soluta maiores rerum optio, possimus animi eligendi architecto sed placeat quasi quibusdam, nihil odio. Amet, tempore.</p>
</details>

See it here on GitHack