如何正確使用多個屬性的 CSS 過渡簡寫？

如何將 CSS 過渡簡寫與多個屬性一起使用

CSS 過渡簡寫允許您在單一聲明中指定多個過渡屬性。這對於減少需要編寫的程式碼量很有用。然而，找到正確的語法可能具有挑戰性。

不正確的簡寫語法

提供的程式碼片段錯誤地使用了CSS 轉換簡寫：

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
}

問題出在不透明度過渡的第三個參數上。您無法在持續時間之後指定延遲。

正確的簡寫語法

具有多個屬性的 CSS 轉換簡寫的正確語法如下：

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

請注意，持續時間必須在延遲之前，如果後者是

範例

要使用簡寫轉換元素的高度和不透明度，您可以編寫：

.element {
  transition: height 0.5s, opacity 0.5s;
}

或者，您可以一次轉換元素的所有CSS屬性：

.element {
  transition: all 0.5s;
}

透過使用CSS 過渡簡寫，您可以簡化 CSS 程式碼並減少定義過渡所需的時間。

以上是如何正確使用多個屬性的 CSS 過渡簡寫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！