這篇文章介紹了 Chrome 剛才登陸的幾個實用功能，說明四項全新的進入和離開效果的 CSS 功能。現在，「@starting-style」和「transition-behavior: allow-discrete」這兩個功能，在 Firefox 129 推出後，已成為「 Baseline 新支援」！您現在可以為元素建立輸入動畫效果，包括以 display: none 為動畫呈現的元素，以及在頂層圖層中建立動畫效果。
使用 @starting-style 設定項目特效
@starting-style 規則可定義元素的初始樣式，然後才顯示在網頁上。對於從 display: none 加入動畫的元素，此為必要項目，因為元素需要有動畫效果的狀態。
如同在 CSS 中的任何其他規則，使用 @starting-style 加入元素的樣式。舉例來說，如果使用 <dialog>，請將 dialog[open] 樣式放在 @starting-style 規則中。這些是對話方塊開啟前所使用的樣式。
@starting-style {
dialog[open] {
/* Styles before the dialog opens */
}
}
使用 allow-discrete 啟用離散動畫
此外，如要支援從 display: none 產生動畫的元素 (例如對話方塊和彈出式視窗) 的輸入動畫，必須啟用新的動畫模式，支援離散屬性的動畫。離散屬性是指無法在值之間互譯的屬性。這就像是開啟/關閉開關。例如 display、visibility、mix-blend-mode，也就是特徵是單一值的任何屬性。在這種新的動畫模式中，瀏覽器現在支援在 50% 點交換值，而非轉場時的 0% 點。
請使用下列其中一種方式，為 display: none 和 visibility: hidden 元素建立項目效果動畫：
- 獨立屬性
transition-behavior，值為allow-discrete。 - 轉場效果中的
allow-discrete值。
建議您使用第二個方法，因為套用 transition-behavior 的方法包含在 transition 簡寫中。如果在套用轉換、時間和加/減速函式「之前」的精簡轉換中套用 transition-behavior: allow-discrete，瀏覽器會忽略 transition-behavior。
如果直接使用這個方法，只需將 allow-discrete 關鍵字套用至需要獨立動畫的特定屬性即可。以下 CSS 示範如何同時轉換 translate 屬性和 display 屬性，但只會將 allow-discrete 關鍵字套用至 display 屬性。
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
示範：整合所有要點
這些功能對於頂層元素 (例如 <dialog> 元素或使用 popover 屬性的元件) 特別有用。在以下範例中，<dialog> 元素會從可視區域底部以動畫呈現 (最初是從螢幕外的 100 伏特垂直平移開始)，直到 <dialog> 開啟時移除翻譯。
/* Before the dialog opens */
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* Dialog is-open state */
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}
您可以利用 CSS 巢狀結構簡明地編寫這項作業，而 CSS 巢狀結構也是最新的基準功能。
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
@starting-style {
translate: 0 100vh;
}
}
結論
很興奮看到這樣的在 Baseline 中的進展，但至少，這讓我們能夠針對這些元素進行漸進式的增強。如果沒有這些進入效果功能，動畫會進入頂層圖層或 display: none 樣式的元素，就和目前一樣，在不轉換效果的情況下顯示於網頁上。
如要瞭解如何逐步強化結束效果，請參閱「4 個全新的 CSS 功能，流暢進入及離開動畫」。如要進一步瞭解這些功能，請參閱以下說明文件資源：