My goal is to animate elements within the summary section of an HTML details element. Interestingly, Firefox executes the animation perfectly and it repeats each time I open or close the details. However, on Chrome, the animation only runs when the details is first opened and never again.
details {
font-size: x-large;
}
details[open] ul li {
animation: expand-details 1s ease-in-out;
}
details[open] ul li:nth-child(1) {
animation-fill-mode: backwards;
animation-delay: 100ms;
}
details[open] ul li:nth-child(2) {
animation-fill-mode: backwards;
animation-delay: 200ms;
}
details[open] ul li:nth-child(3) {
animation-fill-mode: backwards;
animation-delay: 300ms;
}
@keyframes expand-details {
from {
opacity: 0;
left: -20px;
}
to {
opacity: 1;
left: 0;
}
}<details>
<summary>Click me to open an animated list of items</summary>
<ul>
<li>These elements</li>
<li>should ease in</li>
<li>with a duration of 1s.</li>
</ul>
</details>How can I ensure that the animation restarts in Chrome whenever I close and reopen the details element?