點(diǎn)擊添加css動(dòng)畫：
<html>
<head>
<style>
.bounce {
animation-name: bounce;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<button onclick="addBounceAnimation()">點(diǎn)擊添加彈跳動(dòng)畫</button>
<div id="box"></div>
<script>
function addBounceAnimation() {
const box = document.getElementById('box');
box.classList.add('bounce');
}
</script>
</body>
</html>添加css動(dòng)畫的過程：
1. 首先需要在<head>標(biāo)簽內(nèi)添加css樣式，其中animation-name屬性為動(dòng)畫名稱，animation-duration屬性為動(dòng)畫時(shí)長，animation-iteration-count屬性為動(dòng)畫循環(huán)次數(shù)。
2. 定義動(dòng)畫過程的關(guān)鍵幀，在這里用了transform屬性來改變?cè)氐奈恢谩?/p>
3. 在body內(nèi)添加一個(gè)button按鈕，并給其添加一個(gè)click事件，在事件內(nèi)調(diào)用addBounceAnimation()函數(shù)。
4. addBounceAnimation()函數(shù)內(nèi)取得id為box的元素，并給其添加bounce這個(gè)class，這樣就可以添加彈跳動(dòng)畫了。