CSS時間過度怎么寫？

在CSS中，時間過度（transition）是一種常用的屬性，用于在元素之間添加平滑的過渡效果，下面是一些關(guān)于如何在CSS中編寫時間過度的示例代碼：

1、過渡單個屬性：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 2s;
}

在上面的代碼中，我們?yōu)閐iv元素添加了一個背景顏色的過渡效果，過渡時間為2秒。

2、過渡多個屬性：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 3s, background-color 4s;
}

在上面的代碼中，我們?yōu)閐iv元素添加了寬度、高度和背景顏色的過渡效果，過渡時間分別為2秒、3秒和4秒。

3、添加延遲：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 2s;
  transition-delay: 1s;
}

在上面的代碼中，我們?yōu)閐iv元素的背景顏色添加了一個過渡效果，過渡時間為2秒，但添加了一個1秒的延遲。

4、鏈?zhǔn)竭^渡：

div {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 3s, background-color 4s;
  transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
}

在上面的代碼中，我們?yōu)閐iv元素的寬度、高度和背景顏色添加了一個鏈?zhǔn)竭^渡效果，使用了cubic-bezier函數(shù)來定義過渡的緩動曲線。

除了以上示例外，CSS時間過度還可以與JavaScript結(jié)合使用，實現(xiàn)更加豐富的交互效果，希望這些示例能夠幫助你更好地掌握CSS時間過度的寫法。