使用 CSS 的 @starting-style 屬性設定進入頁面的初始樣式

在 CSS 中，@starting-style 是一個新的 at 規則，用於定義元素在首次樣式更新時的初始樣式。這個規則特別適合用於需要過渡效果的元素，例如從 display: none 變為可見狀態的元素，或是彈出層（如對話框、彈出提示）等。

語法：

@starting-style 可以以兩種方式使用：

1. 獨立使用：

@starting-style {
  選擇器 {
    屬性: 值;
    /* 其他屬性 */
  }
}

2. 嵌套在現有規則內：

選擇器 {
  /* 現有樣式 */
  @starting-style {
    屬性: 值;
    /* 其他屬性 */
  }
}

使用範例：

假設我們有一個彈出層，在顯示時希望有淡入效果：

/* 定義彈出層的過渡效果 */
.popover {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s, transform 0.5s;
}

/* 定義初始樣式 */
@starting-style {
  .popover {
    opacity: 0;
    transform: scale(0.9);
  }
}

在上述範例中，當 .popover 元素首次顯示時，會從 opacity: 0 和 transform: scale(0.9) 漸變到 opacity: 1 和 transform: scale(1)，實現淡入效果。

注意事項：

• @starting-style 主要用於定義元素在首次渲染或從 display: none 變為可見時的初始樣式，從而實現平滑的過渡效果。

• 目前，@starting-style 的支持情況可能因瀏覽器而異。在使用前，建議檢查目標瀏覽器的支援情況。

透過使用 @starting-style，開發者可以更靈活地控制元素的初始狀態，實現更流暢的過渡效果，提升用戶體驗。