Get your own website Result Size: 625 x 565
x
 
<!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>