Ever wanted a pop-up mechanism on your website, but you don't want to use JavaScript? Here's how:
Toggle the How it works button for more info.
Ever wanted a pop-up mechanism on your website, but you don't want to use JavaScript? Here's how:
Toggle the How it works button for more info.
The scaling effect you see when you open this <details> element is created by using a keyframe animation.
@keyframes scale {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}This animation is added to the <div>, but only when the [open] attribute is toggled.
details[open] div {
animation: scale .15s ease;
}Sadly there's no way (that I know of) to animate the <div> when the <details> is closing.