CSS 動(dòng)畫(huà)是現(xiàn)代 Web 開(kāi)發(fā)的重要組成部分。它能夠通過(guò) CSS 屬性和關(guān)鍵幀來(lái)創(chuàng)建各種各樣的動(dòng)畫(huà)效果，使網(wǎng)站更加生動(dòng)有趣。本文將介紹如何使用 CSS 動(dòng)畫(huà)制作一個(gè)紅綠燈效果。

/* 定義紅綠燈外框的樣式 */
.traffic-light {
width: 50px;
height: 100px;
border: 1px solid black;
border-radius: 5px;
}
/* 定義紅綠黃三個(gè)燈的樣式 */
.red-light, .yellow-light, .green-light {
width: 30px;
height: 30px;
border-radius: 50%;
margin: 5px auto;
}
/* 紅燈的樣式 */
.red-light {
background-color: red;
}
/* 黃燈的樣式 */
.yellow-light {
background-color: yellow;
}
/* 綠燈的樣式 */
.green-light {
background-color: green;
}
/* 定義紅綠燈變換的動(dòng)畫(huà) */
@keyframes traffic-light-animation {
0% {
transform: translateY(0);
}
30% {
transform: translateY(0);
}
33% {
transform: translateY(-40px);
}
63% {
transform: translateY(-40px);
}
66% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
/* 將動(dòng)畫(huà)應(yīng)用到紅綠燈外框上 */
.traffic-light {
animation: traffic-light-animation 3s linear infinite;
}

在以上代碼中，我們先定義了紅綠燈外框和三個(gè)燈的樣式。最后通過(guò)定義一個(gè)名為traffic-light-animation的動(dòng)畫(huà)，將其應(yīng)用在紅綠燈外框上，實(shí)現(xiàn)動(dòng)態(tài)變換的效果。

動(dòng)畫(huà)定義中，通過(guò)keyframes關(guān)鍵字定義了紅綠燈狀態(tài)的變換過(guò)程。動(dòng)畫(huà)分為六個(gè)階段，紅燈亮三秒后熄滅，黃燈亮一秒后熄滅，綠燈亮五秒后熄滅。通過(guò)transform: translateY()屬性來(lái)實(shí)現(xiàn)紅、黃、綠三個(gè)燈的位置變化。

最后，我們?cè)跇邮街性O(shè)置了動(dòng)畫(huà)時(shí)間為 3 秒，使用linear緩動(dòng)函數(shù)實(shí)現(xiàn)等速動(dòng)畫(huà)，并設(shè)置其在完成后立即重復(fù)播放。

以上代碼是一個(gè)簡(jiǎn)單的紅綠燈動(dòng)畫(huà)的實(shí)現(xiàn)。通過(guò)了解 CSS 動(dòng)畫(huà)的應(yīng)用，我們可以創(chuàng)造出各種各樣的炫酷效果，改善網(wǎng)站的用戶體驗(yàn)。希望本文能夠幫助您掌握 CSS 動(dòng)畫(huà)的基本概念和實(shí)現(xiàn)方法。