CSS3彈跳動(dòng)畫(huà)是一種非常有趣的效果，它能夠使元素在頁(yè)面中跳來(lái)跳去，增加頁(yè)面的趣味性。下面我們來(lái)一起學(xué)習(xí)如何通過(guò)CSS3實(shí)現(xiàn)彈跳動(dòng)畫(huà)。

// HTML代碼
<div class="box"></div>
// CSS代碼
.box {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: bounce 1s ease infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}

上述代碼中，我們創(chuàng)建了一個(gè)紅色的正方形元素，并通過(guò)transform屬性將其居中。接著，通過(guò)animation屬性指定了一個(gè)名為“bounce”的動(dòng)畫(huà)，該動(dòng)畫(huà)會(huì)無(wú)限循環(huán)。在@keyframes中，我們定義了該動(dòng)畫(huà)的具體運(yùn)動(dòng)規(guī)律：元素在0%、20%、50%、80%、100%的時(shí)間點(diǎn)保持靜止，而在40%的時(shí)間點(diǎn)向上移動(dòng)30像素，60%的時(shí)間點(diǎn)向上移動(dòng)15像素。

通過(guò)這種方式，我們就能夠?qū)崿F(xiàn)一個(gè)簡(jiǎn)單的彈跳動(dòng)畫(huà)效果。當(dāng)然，如果你想要實(shí)現(xiàn)更加華麗的彈跳效果，還可以通過(guò)調(diào)整動(dòng)畫(huà)規(guī)律和元素樣式來(lái)進(jìn)行探索。