在CSS中引用動(dòng)畫，可以通過(guò)使用@keyframes規(guī)則來(lái)實(shí)現(xiàn)。@keyframes規(guī)則用于創(chuàng)建動(dòng)畫，可以指定動(dòng)畫的名稱、持續(xù)時(shí)間、延遲時(shí)間、重復(fù)次數(shù)等屬性，在@keyframes規(guī)則中，可以定義多個(gè)關(guān)鍵幀，每個(gè)關(guān)鍵幀對(duì)應(yīng)一個(gè)時(shí)間節(jié)點(diǎn)，用于描述動(dòng)畫在不同時(shí)間節(jié)點(diǎn)的狀態(tài)。

以下是一個(gè)簡(jiǎn)單的CSS動(dòng)畫示例，其中使用了@keyframes規(guī)則創(chuàng)建了一個(gè)名為“my-animation”的動(dòng)畫：

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

在上面的示例中，動(dòng)畫從0%開(kāi)始，到50%時(shí)移動(dòng)到100px的位置，然后在100%時(shí)返回初始位置，可以通過(guò)將動(dòng)畫應(yīng)用到元素上來(lái)實(shí)現(xiàn)動(dòng)畫效果：

div {
  animation: my-animation 2s infinite;
}

在上面的示例中，動(dòng)畫將持續(xù)2秒，并且會(huì)無(wú)限次重復(fù)，可以通過(guò)調(diào)整持續(xù)時(shí)間、延遲時(shí)間、重復(fù)次數(shù)等屬性來(lái)定制動(dòng)畫效果。

除了@keyframes規(guī)則，CSS還提供了其他創(chuàng)建動(dòng)畫的方法，例如使用transition屬性來(lái)實(shí)現(xiàn)簡(jiǎn)單的過(guò)渡效果。@keyframes規(guī)則提供了更大的靈活性和控制力，可以用于創(chuàng)建更復(fù)雜的動(dòng)畫效果。