CodePen Embed - qBGXoZj

<button popovertarget="my-popover">ポップオーバーを開く</button>

<div popover id="my-popover">こんにちは！</div>

[popover]:popover-open {
  transform: scaleX(1);
  transition: transform 1s;
}

@starting-style {
  [popover]:popover-open {
    transform: scaleX(0);
  }
}

This Pen is owned by azukiazusa1 on CodePen.

See more by @azukiazusa1 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.