在CSS中，時(shí)間控制通常涉及到動(dòng)畫(huà)和過(guò)渡效果，CSS提供了animation和transition兩個(gè)關(guān)鍵屬性，可以用來(lái)控制元素在一段時(shí)間內(nèi)的變化。

1. 動(dòng)畫(huà)（Animation）

CSS的animation屬性可以用來(lái)創(chuàng)建動(dòng)畫(huà)效果，它接受一系列參數(shù)，包括動(dòng)畫(huà)名稱(chēng)、持續(xù)時(shí)間、緩動(dòng)函數(shù)等。

@keyframes example {
  0% { background-color: red; }
  50% { background-color: blue; }
  100% { background-color: green; }
}
div {
  animation-name: example;
  animation-duration: 4s;
}

在這個(gè)例子中，@keyframes定義了一個(gè)動(dòng)畫(huà)序列，div元素將在這個(gè)動(dòng)畫(huà)序列中持續(xù)4秒。

2. 過(guò)渡（Transition）

CSS的transition屬性可以用來(lái)創(chuàng)建過(guò)渡效果，即在兩個(gè)狀態(tài)之間逐漸變化，它接受參數(shù)包括過(guò)渡屬性、持續(xù)時(shí)間、緩動(dòng)函數(shù)等。

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

在這個(gè)例子中，div元素的背景顏色將在2秒內(nèi)從紅色過(guò)渡到藍(lán)色，當(dāng)鼠標(biāo)懸停時(shí)。

3. 時(shí)間函數(shù)（Timing Functions）

CSS還提供了幾種時(shí)間函數(shù)，可以用來(lái)控制動(dòng)畫(huà)和過(guò)渡的速度，常見(jiàn)的時(shí)間函數(shù)包括：

linear：動(dòng)畫(huà)或過(guò)渡的速度保持恒定。

ease-in：動(dòng)畫(huà)或過(guò)渡在開(kāi)始時(shí)速度較慢，然后逐漸加快。

ease-out：動(dòng)畫(huà)或過(guò)渡在結(jié)束時(shí)速度較慢，然后逐漸加快。

ease-in-out：動(dòng)畫(huà)或過(guò)渡在開(kāi)始時(shí)和結(jié)束時(shí)速度較慢，中間過(guò)程加快。

4. 循環(huán)（Looping）

CSS的animation-iteration-count屬性可以用來(lái)控制動(dòng)畫(huà)的循環(huán)次數(shù)。

div {
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

在這個(gè)例子中，div元素將循環(huán)播放名為example的動(dòng)畫(huà)3次，每次持續(xù)4秒。

Summary）

通過(guò)CSS的animation、transition屬性以及時(shí)間函數(shù)和循環(huán)次數(shù)，你可以輕松控制元素在一段時(shí)間內(nèi)的變化效果，這些功能使得CSS不僅限于靜態(tài)樣式描述，還能實(shí)現(xiàn)豐富的動(dòng)態(tài)交互效果。