@starting-style — CSS transition ตอน element ปรากฏครั้งแรก

@starting-style กำหนดค่าเริ่มต้นที่ CSS transition จะ animate จาก — ทำให้ element ที่เพิ่งปรากฏ (เช่น popover, dialog) มี entry animation โดยไม่ต้องใช้ JavaScript

/* dialog entry animation — fade + slide ขึ้น */
dialog {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.2s, transform 0.2s, display 0.2s allow-discrete;

  @starting-style {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* exit animation — ใช้ &:not([open]) */
dialog:not([open]) {
  opacity: 0;
  transform: translateY(8px);
}

display ใน transition — allow-discrete ทำให้ transition ของ display: none → block ทำงานได้ ปกติ display เปลี่ยนทันทีโดยไม่มี transition

.popover {
  display: block;
  transition: opacity 0.15s, display 0.15s allow-discrete;
  @starting-style { opacity: 0; }
}
.popover:popover-open { opacity: 1; }

Browser support: Chrome 117+, Firefox 129+, Safari 17.5+ — ใช้ production ได้สำหรับ modern browsers แต่ต้องมี fallback สำหรับ older Safari