mherchel · July 18, 2024 16:14
diff --git a/animate-details.html b/animate-details.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Details CSS Only Animation</title>
 </head>
 <style>
  details {
    width: min(400px, 94%);
    margin: 10px auto;
    padding: 10px;
    background: pink;

    summary {
      padding: 5px;
      background: red;
      color: white;
    }
  }

  .details-animate {
    --details-transition-duration: 500ms;

    @media (prefers-reduced-motion: no-preference) {
      @supports selector(::details-content) and (transition-behavior: allow-discrete) and (height: calc-size(auto)) {
        &::details-content {
          height: 0px;
          overflow: hidden;
          transition-property: height, content-visibility;
          transition-duration: var(--details-transition-duration);
          transition-behavior: allow-discrete;
        }

        &[open]::details-content {
          height: calc-size(auto);
        }
      }
    }
  }
 </style>
 <body>
  <details class="details-animate">
    <summary>Animated</summary>
      At ipsum beatae ducimus sapiente dolorem eum commodi quae doloribus illum
      repellat, saepe, repellendus aliquam id accusantium excepturi ab. Animi
      libero explicabo sequi saepe magni mollitia? Sed quia quos non. Veritatis,
      quae. Soluta hic inventore blanditiis minima repellendus nisi ratione
      fugiat deleniti magnam possimus? Architecto dignissimos iusto tempore id
      eos aspernatur ab nam deserunt! Dolorem voluptatem expedita nihil ea hic.
      Commodi nesciunt id accusantium soluta saepe nostrum quo cupiditate magnam
      modi. Corporis nobis odio similique incidunt dolorem? Magni quasi a illo
      ullam fugit doloribus porro suscipit soluta reiciendis. Atque, incidunt?
      Aliquam laborum amet dolorem, ipsa nostrum nobis neque ab laudantium eos
      eius cum quidem assumenda, unde praesentium tempora expedita velit, veniam
      accusantium iste. Unde optio consectetur dicta distinctio atque odio! Sint
      nihil facilis accusantium consectetur ullam, quidem ut placeat iste!
      Repellat, tempore sit similique aliquid facere quisquam. Recusandae modi
      possimus dolor quasi cupiditate sed aperiam vitae laborum voluptates,
      distinctio ipsam! cheese
  </details>

  <details>
    <summary>Not animated</summary>
      At ipsum beatae ducimus sapiente dolorem eum commodi quae doloribus illum
      repellat, saepe, repellendus aliquam id accusantium excepturi ab. Animi
      libero explicabo sequi saepe magni mollitia? Sed quia quos non. Veritatis,
      quae. Soluta hic inventore blanditiis minima repellendus nisi ratione
      fugiat deleniti magnam possimus? Architecto dignissimos iusto tempore id
      eos aspernatur ab nam deserunt! Dolorem voluptatem expedita nihil ea hic.
      Commodi nesciunt id accusantium soluta saepe nostrum quo cupiditate magnam
      modi. Corporis nobis odio similique incidunt dolorem? Magni quasi a illo
      ullam fugit doloribus porro suscipit soluta reiciendis. Atque, incidunt?
      Aliquam laborum amet dolorem, ipsa nostrum nobis neque ab laudantium eos
      eius cum quidem assumenda, unde praesentium tempora expedita velit, veniam
      accusantium iste. Unde optio consectetur dicta distinctio atque odio! Sint
      nihil facilis accusantium consectetur ullam, quidem ut placeat iste!
      Repellat, tempore sit similique aliquid facere quisquam. Recusandae modi
      possimus dolor quasi cupiditate sed aperiam vitae laborum voluptates,
      distinctio ipsam! cheese
  </details>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Details CSS Only Animation</title>
	</head>
	<style>
	details {
	width: min(400px, 94%);
	margin: 10px auto;
	padding: 10px;
	background: pink;

	summary {
	padding: 5px;
	background: red;
	color: white;
	}
	}

	.details-animate {
	--details-transition-duration: 500ms;

	@media (prefers-reduced-motion: no-preference) {
	@supports selector(::details-content) and (transition-behavior: allow-discrete) and (height: calc-size(auto)) {
	&::details-content {
	height: 0px;
	overflow: hidden;
	transition-property: height, content-visibility;
	transition-duration: var(--details-transition-duration);
	transition-behavior: allow-discrete;
	}

	&[open]::details-content {
	height: calc-size(auto);
	}
	}
	}
	}
	</style>
	<body>
	<details class="details-animate">
	<summary>Animated</summary>
	At ipsum beatae ducimus sapiente dolorem eum commodi quae doloribus illum
	repellat, saepe, repellendus aliquam id accusantium excepturi ab. Animi
	libero explicabo sequi saepe magni mollitia? Sed quia quos non. Veritatis,
	quae. Soluta hic inventore blanditiis minima repellendus nisi ratione
	fugiat deleniti magnam possimus? Architecto dignissimos iusto tempore id
	eos aspernatur ab nam deserunt! Dolorem voluptatem expedita nihil ea hic.
	Commodi nesciunt id accusantium soluta saepe nostrum quo cupiditate magnam
	modi. Corporis nobis odio similique incidunt dolorem? Magni quasi a illo
	ullam fugit doloribus porro suscipit soluta reiciendis. Atque, incidunt?
	Aliquam laborum amet dolorem, ipsa nostrum nobis neque ab laudantium eos
	eius cum quidem assumenda, unde praesentium tempora expedita velit, veniam
	accusantium iste. Unde optio consectetur dicta distinctio atque odio! Sint
	nihil facilis accusantium consectetur ullam, quidem ut placeat iste!
	Repellat, tempore sit similique aliquid facere quisquam. Recusandae modi
	possimus dolor quasi cupiditate sed aperiam vitae laborum voluptates,
	distinctio ipsam! cheese
	</details>

	<details>
	<summary>Not animated</summary>
	At ipsum beatae ducimus sapiente dolorem eum commodi quae doloribus illum
	repellat, saepe, repellendus aliquam id accusantium excepturi ab. Animi
	libero explicabo sequi saepe magni mollitia? Sed quia quos non. Veritatis,
	quae. Soluta hic inventore blanditiis minima repellendus nisi ratione
	fugiat deleniti magnam possimus? Architecto dignissimos iusto tempore id
	eos aspernatur ab nam deserunt! Dolorem voluptatem expedita nihil ea hic.
	Commodi nesciunt id accusantium soluta saepe nostrum quo cupiditate magnam
	modi. Corporis nobis odio similique incidunt dolorem? Magni quasi a illo
	ullam fugit doloribus porro suscipit soluta reiciendis. Atque, incidunt?
	Aliquam laborum amet dolorem, ipsa nostrum nobis neque ab laudantium eos
	eius cum quidem assumenda, unde praesentium tempora expedita velit, veniam
	accusantium iste. Unde optio consectetur dicta distinctio atque odio! Sint
	nihil facilis accusantium consectetur ullam, quidem ut placeat iste!
	Repellat, tempore sit similique aliquid facere quisquam. Recusandae modi
	possimus dolor quasi cupiditate sed aperiam vitae laborum voluptates,
	distinctio ipsam! cheese
	</details>
	</body>
	</html>