@starting-style

📝 TL;DR

定義元素首次呈現的起始樣式，與 transition 搭配做平滑進場。
適合：模態框、Popover、展開區塊、淡入進場。
放在目標樣式後方，且僅影響第一次進場。

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

用途

定義初始樣式： 當元素首次顯示或從display: none變為其他狀態時，設定其起始樣式。
實現平滑過渡： 配合CSS過渡效果（transition），讓元素從初始樣式過渡到目標樣式。
適用範圍： 尤其適合處理彈出層、模態框、動畫進入效果等。

語法

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

獨立使用：

css

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

嵌套在現有規則內：

css

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

範例

範例1：彈出層的淡入效果

css

/* 定義彈出層的過渡效果 */
.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)。

範例2：模態框的進入效果

css

.dialog {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s, transform 0.5s;
}

@starting-style {
    .dialog {
        opacity: 0;
        transform: translateY(-50px);
    }
}

此範例設定模態框進入時的初始位置和透明度，並通過過渡效果讓其平滑顯示。

範例3：背景色過渡

css

#target {
    transition: background-color 1.5s;
    background-color: green;
}

@starting-style {
    #target {
        background-color: transparent;
    }
}

此範例讓元素背景色從透明漸變為綠色。

注意事項

@starting-style僅適用於CSS過渡（transition），不適用於CSS動畫（animation）。
初始樣式僅在元素首次渲染或從不可見狀態轉為可見狀態時生效。
確保將@starting-style放置在目標樣式之後，以避免被覆蓋。

瀏覽器支持

目前支持該規則的瀏覽器版本如下：

瀏覽器	支持版本
Chrome	117
Edge	117
Firefox	129
Safari	17.5
Opera	103

實戰練習

練習 1：淡入卡片（簡單）⭐

首次載入時卡片從透明到顯示。

💡 參考答案

css

.card {
    opacity: 1;
    transition: opacity .4s ease;
}
@starting-style {
    .card { opacity: 0; }
}

練習 2：上滑進場（簡單）⭐

元素從上方滑入。

💡 參考答案

css

.panel {
    transform: translateY(0);
    transition: transform .4s ease, opacity .4s ease;
}
@starting-style {
    .panel {
        transform: translateY(-24px);
        opacity: 0;
    }
}

練習 3：模態框縮放（中等）⭐⭐

模態框第一次顯示時由 0.9 放大到 1。

💡 參考答案與提示

css

.modal {
    transform: scale(1);
    transition: transform .25s ease, opacity .25s ease;
    opacity: 1;
}
@starting-style {
    .modal {
        transform: scale(0.9);
        opacity: 0;
    }
}

提示：@starting-style 只作用在首次進場，之後開關可用 class 控制。

FAQ

Q: 和 @keyframes/animation 差別？
- A: @starting-style 只配合 transition 的初始狀態；animation 會在整個時程執行。
Q: 重複進出還有效嗎？
- A: 只在第一次進場生效；之後需用 class 搭配 transition。
Q: 未支援瀏覽器怎麼辦？
- A: 加 @supports (selector(@starting-style)) 判斷，或改用初始 class + JS 切換。

Contributors

lucashsu95

Changelog

Last edited about 1 month ago

View full history

@starting-style ​

用途 ​

語法 ​

範例 ​

範例1：彈出層的淡入效果 ​

範例2：模態框的進入效果 ​

範例3：背景色過渡 ​

注意事項 ​

瀏覽器支持 ​

實戰練習 ​

練習 1：淡入卡片（簡單）⭐ ​

練習 2：上滑進場（簡單）⭐ ​

練習 3：模態框縮放（中等）⭐⭐ ​

FAQ ​