<!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>