在CSS中，我們可以使用@keyframes規(guī)則來創(chuàng)建動畫，這個規(guī)則允許我們定義一系列的樣式幀，這些樣式幀可以描述一個元素從一種狀態(tài)變化到另一種狀態(tài)，為了使用@keyframes，我們需要先定義一個動畫名稱，然后在這個名稱下定義一系列的樣式幀。

我們可以創(chuàng)建一個名為my-animation的動畫，其中元素從透明狀態(tài)變?yōu)椴煌该鳡顟B(tài)：

@keyframes my-animation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

在這個例子中，from和to關(guān)鍵字分別表示動畫的起始狀態(tài)和結(jié)束狀態(tài)，我們可以在這兩個狀態(tài)之間定義更多的樣式幀，以創(chuàng)建更復(fù)雜的動畫效果。

一旦我們定義了動畫，就可以使用animation屬性來將這個動畫應(yīng)用到元素上，我們可以將my-animation動畫應(yīng)用到一個名為my-element的元素上，并設(shè)置動畫的持續(xù)時間、延遲時間和循環(huán)次數(shù)：

my-element {
  animation: my-animation 2s 1s 3;
}

在這個例子中，2s表示動畫的持續(xù)時間為2秒，1s表示動畫的延遲時間為1秒，3表示動畫的循環(huán)次數(shù)為3次。

通過使用@keyframes和animation屬性，我們可以輕松地在CSS中創(chuàng)建和應(yīng)用動畫效果。