How to create a pop-up without JavaScript

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.

How it works

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.

popup