Having successfully used @keyframes to animate the opening of the details tag, I am now facing the challenge of animating the closing. Unfortunately, I have not been able to find a CSS solution for this. The @keyframes for closing are not working as expected. Below is the code snippet. I am looking for a CSS-only solution for this issue.
.wrapper {
width: 300px;
height: 300px;
background-color: #ecf0f1;
}
details {
outline: none;
background-color: #95a5a6;
cursor: pointer;
}
summary {
outline: none;
}
details[open] > ul {
animation-name: fadeIn;
animation-duration: 1s;
}
details:not([open]) > ul {
animation-name: fadeOut;
animation-duration: 1.6s;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
100% {
opacity: 1;
}
0% {
opacity: 0;
}
}<div class="wrapper">
<details>
<summary>Sample</summary>
<ul>
<li>
<input type="radio" checked/>
<label>Label 1</label>
</li>
<li>
<input type="radio" />
<label>Label 2</label>
</li>
<li>
<input type="radio" />
<label>Label 3</label>
</li>
</ul>
</details>
</div>