Skip to content

Instantly share code, notes, and snippets.

@mherchel

mherchel/animate-details.html

Last active July 18, 2024 16:14
Show Gist options
  • Save mherchel/4bd2cf6db70e0b6c92cb9a0cb9576c30 to your computer and use it in GitHub Desktop.
Save mherchel/4bd2cf6db70e0b6c92cb9a0cb9576c30 to your computer and use it in GitHub Desktop.
Download ZIP
Animate details HTML element
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment