zig Tryit Editor

<!DOCTYPE html>
<html>
<head>
<style>
:popover-open {
  width: 150px;
  height: 150px;
  color: maroon;
  background-color: orange;
  font-size: 25px;
}

#myPopover {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style { 
    opacity: 0; 
    scale: 1.1; 
  }
}

#myDialog {
  transition: opacity .5s ease-in, scale .5s ease-in;
  @starting-style { 
    opacity: 0; 
    scale: 1.1; 
  }
}
</style>
</head>
<body>

<h1>Demo of @starting-style</h1>

<button popovertarget="myPopover">Show Popover</button>
<div popover id="myPopover">HELLO!</div>

<button id="dialogBtn">Show dialog</button>
<dialog id="myDialog">
  <form method="dialog">
    <p>This is some text in a dialog.</p>
    <button>Close dialog</button>
  </form>
</dialog>

</body>

</html>