CSS++是一個(gè)優(yōu)秀的CSS動(dòng)畫(huà)庫(kù)，它為網(wǎng)站添加了更多的動(dòng)態(tài)效果和交互。而其中的回彈動(dòng)畫(huà)則是很多人喜歡的一種效果。

.bounce {
animation: bounce 0.5s;
-webkit-animation: bounce 0.5s;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translateY(0);
}
50% {
-webkit-transform: translateY(-10px);
}
}

上述代碼實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的回彈動(dòng)畫(huà)。首先是給需要?jiǎng)赢?huà)的元素添加了一個(gè)class為bounce，接著是動(dòng)畫(huà)部分的代碼。

animation和-webkit-animation分別是動(dòng)畫(huà)屬性和瀏覽器私有變量。下面是具體的動(dòng)畫(huà)實(shí)現(xiàn)，在50%的時(shí)候元素上移10像素，形成一個(gè)中間落差，隨后回到起始位置。

通過(guò)CSS++這種優(yōu)秀的CSS動(dòng)畫(huà)庫(kù)，回彈動(dòng)畫(huà)已經(jīng)非常簡(jiǎn)單易用，是Web開(kāi)發(fā)者能夠輕松為網(wǎng)站添加一些炫酷動(dòng)態(tài)效果的好選擇。