在CSS中，我們可以使用@keyframes規(guī)則來創(chuàng)建動畫，這個規(guī)則允許我們定義動畫的多個關(guān)鍵幀，以及每個關(guān)鍵幀的樣式，我們可以使用animation屬性來應(yīng)用這個動畫到某個元素上。

我們需要創(chuàng)建一個@keyframes規(guī)則，

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

這個規(guī)則定義了一個背景顏色從紅色到綠色的動畫，其中黃色和藍色是中間過渡顏色。

我們可以使用animation屬性來應(yīng)用這個動畫到一個元素上，

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

這個樣式將div元素的背景顏色設(shè)置為紅色，并應(yīng)用了我們之前定義的動畫，動畫將在5秒內(nèi)無限循環(huán)。

當(dāng)我們在瀏覽器中查看這個頁面時，div元素的背景顏色將按照我們定義的動畫進行變化。

除了@keyframes規(guī)則和animation屬性，CSS還提供了許多其他用于創(chuàng)建動畫的工具，例如transition屬性可以用于創(chuàng)建簡單的過渡動畫，而transform屬性則可以用于創(chuàng)建更復(fù)雜的動畫效果，這些工具都可以幫助我們輕松地在CSS中插入動畫。