CSS：@starting-style 一個新的、很酷的 at-rule

@starting-style CSS at-rule 用於定義元素上設定的屬性的起始值，當元素接收到其第一次樣式更新時，即當元素首次顯示在先前加載的樣式上時，您想要從該元素進行轉換頁。

我們以 Toast 訊息為例。為了向用戶顯示它，我們將更改它的可見性，但結果將是它立即出現。現在我們可以使用新的 @starting-style 規則來定義該元素的起始動畫。

一些簡單的例子

讓我們使用這個基準 HTML，一個簡單的矩形：

.container {
  width: 10rem;
  height: 10rem;
  background-color: hotpink;  
}

加入從藍色到粉紅色的初始背景顏色過渡

.container {
  ...
  transition: background-color 4s; 
}

@starting-style {
  .container {
    background-color: blue;
  }
}

在前面的範例中加入旋轉

.container {
  ...
  transition: transform 4s, background-color 4s;
  transform: rotate(0deg);} 
}

@starting-style {
  .container {
    background-color: blue;
    transform: rotate(360deg);
  }
}

無論如何，你明白了。
為您的彈出視窗和選單設定動畫或建立動畫徽標，
很簡單。

筆記

此功能目前可用性有限。

以上是CSS：@starting-style 一個新的、很酷的 at-rule的詳細內容。更多資訊請關注PHP中文網其他相關文章！