在CSS中，我們可以使用多種方法來(lái)實(shí)現(xiàn)動(dòng)畫效果，以下是一些常見的動(dòng)畫技術(shù)：

1、關(guān)鍵幀動(dòng)畫：使用@keyframes規(guī)則創(chuàng)建動(dòng)畫序列。

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: orange;}
  50%  {background-color: yellow;}
  100% {background-color: green;}
}

2、過(guò)渡：使用transition屬性來(lái)定義元素狀態(tài)改變時(shí)的過(guò)渡效果。

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

3、動(dòng)畫：使用animation屬性來(lái)定義動(dòng)畫效果。

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

其中example是之前定義的@keyframes動(dòng)畫。

4、延遲：使用delay屬性來(lái)定義動(dòng)畫開始前的延遲時(shí)間。

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

5、循環(huán)：使用iteraction-count屬性來(lái)定義動(dòng)畫的循環(huán)次數(shù)。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 2s;
  animation-iteraction-count: 3; /* 動(dòng)畫將循環(huán)3次 */
}

6、方向：使用direction屬性來(lái)定義動(dòng)畫是否應(yīng)該倒放。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 2s;
  animation-direction: reverse; /* 動(dòng)畫將倒放 */
}

7、填充模式：使用fill-mode屬性來(lái)控制動(dòng)畫結(jié)束后元素的樣式。

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: example 2s;
  animation-fill-mode: forwards; /* 動(dòng)畫結(jié)束后，元素將保持***后一幀的狀態(tài) */
}

這些技術(shù)可以幫助你在CSS中創(chuàng)建各種復(fù)雜的動(dòng)畫效果，通過(guò)組合使用這些屬性，你可以實(shí)現(xiàn)豐富的交互效果和視覺體驗(yàn)。