在 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，開發者可以更靈活地控制元素的初始狀態，實現更流暢的過渡效果，提升用戶體驗。
