一、使用 @keyframes 規(guī)則定義動(dòng)畫

`@keyframes`規(guī)則用于定義動(dòng)畫的各個(gè)關(guān)鍵幀，通過指定不同時(shí)間點(diǎn)的樣式變化來創(chuàng)建動(dòng)畫效果。例如，以下代碼定義了一個(gè)簡單的淡入淡出動(dòng)畫：

```css

@keyframes fadeInOut {

0% {

opacity: 0;

}

50% {

opacity: 1;

}

100% {

opacity: 0;

}

}

```

在這個(gè)例子中，`0%`表示動(dòng)畫的開始狀態(tài)，`50%`是中間狀態(tài)，`100%`是結(jié)束狀態(tài)。通過設(shè)置不同關(guān)鍵幀的樣式，如`opacity`屬性的變化，實(shí)現(xiàn)了元素的淡入淡出效果。

二、應(yīng)用動(dòng)畫到表單元素

要將定義的動(dòng)畫應(yīng)用到表單元素上，可以使用`animation`屬性。`animation`屬性接受多個(gè)值，用于指定動(dòng)畫的名稱、持續(xù)時(shí)間、播放次數(shù)、播放狀態(tài)等。以下是一個(gè)將淡入淡出動(dòng)畫應(yīng)用到輸入框的示例：

```css

input {

animation: fadeInOut 2s linear infinite;

}

```

在這個(gè)例子中，`animation`屬性的值包括動(dòng)畫的名稱`fadeInOut`、持續(xù)時(shí)間`2s`、線性運(yùn)動(dòng)`linear`（表示動(dòng)畫以勻速播放）和無限播放`infinite`。這樣，輸入框就會(huì)在 2 秒內(nèi)以勻速淡入淡出，并無限循環(huán)播放。

三、控制動(dòng)畫播放狀態(tài)

1. 播放/暫停動(dòng)畫：可以使用`animation-play-state`屬性來控制動(dòng)畫的播放狀態(tài)。該屬性接受兩個(gè)值：`running`表示播放動(dòng)畫，`paused`表示暫停動(dòng)畫。例如，以下代碼可以暫停輸入框的動(dòng)畫：

```css

input {

animation: fadeInOut 2s linear infinite;

animation-play-state: paused;

}

```

通過將`animation-play-state`設(shè)置為`paused`，輸入框的動(dòng)畫將暫停，直到再次將其設(shè)置為`running`。

2. 開始/結(jié)束動(dòng)畫：除了暫停動(dòng)畫，還可以使用`animation-play-state`屬性來開始或結(jié)束動(dòng)畫。例如，以下代碼可以在按鈕點(diǎn)擊時(shí)開始輸入框的動(dòng)畫：

```css

input {

animation: fadeInOut 2s linear infinite;

animation-play-state: paused;

}

button {

cursor: pointer;

}

button:hover input {

animation-play-state: running;

}

```

在這個(gè)例子中，輸入框的動(dòng)畫初始狀態(tài)為暫停，當(dāng)鼠標(biāo)懸停在按鈕上時(shí)，通過`:hover`偽類選擇器將輸入框的`animation-play-state`設(shè)置為`running`，從而開始動(dòng)畫。

3. 反向播放動(dòng)畫：`animation-direction`屬性可以控制動(dòng)畫的播放方向，默認(rèn)值為`normal`，表示正向播放。將`animation-direction`設(shè)置為`reverse`，動(dòng)畫將反向播放。例如：

```css

input {

animation: fadeInOut 2s linear infinite;

animation-play-state: paused;

animation-direction: reverse;

}

```

在這個(gè)例子中，輸入框的動(dòng)畫將反向淡入淡出。

四、其他動(dòng)畫屬性

除了上述屬性，CSS 還提供了其他一些用于控制動(dòng)畫的屬性，如`animation-delay`（延遲動(dòng)畫開始的時(shí)間）、`animation-duration`（動(dòng)畫的持續(xù)時(shí)間）、`animation-timing-function`（動(dòng)畫的運(yùn)動(dòng)曲線）等。這些屬性可以根據(jù)具體需求進(jìn)行調(diào)整，以實(shí)現(xiàn)更復(fù)雜的動(dòng)畫效果。

通過`@keyframes`規(guī)則定義動(dòng)畫，使用`animation`屬性將動(dòng)畫應(yīng)用到表單元素上，并利用`animation-play-state`屬性控制動(dòng)畫的播放狀態(tài)，我們可以輕松地在 CSS 中設(shè)置表單元素的動(dòng)畫播放效果，為網(wǎng)頁添加生動(dòng)的交互和視覺效果。在實(shí)際應(yīng)用中，可以根據(jù)具體需求組合使用這些屬性，創(chuàng)造出各種豐富多彩的動(dòng)畫效果。