animate.css是一種優(yōu)秀的CSS動(dòng)畫(huà)庫(kù)，它可以幫助Web開(kāi)發(fā)人員以一種簡(jiǎn)單、有趣的方式添加動(dòng)畫(huà)效果。使用animate.css，開(kāi)發(fā)人員可以使用預(yù)先構(gòu)建的CSS類輕松地實(shí)現(xiàn)各種動(dòng)畫(huà)效果，無(wú)需編寫(xiě)大量的JavaScript代碼。

animate.css中有一種有趣的動(dòng)畫(huà)效果叫做抖動(dòng)動(dòng)畫(huà)，可以幫助開(kāi)發(fā)人員在Web界面中添加一些獨(dú)特的動(dòng)態(tài)效果，從而吸引用戶的注意力。在animate.css中，抖動(dòng)動(dòng)畫(huà)由以下類實(shí)現(xiàn)：

.animated {
/*...*/
}
/* 水平抖動(dòng) */
@keyframes shake { 
0% { transform: translateX(0); }
10%, 90% { transform: translateX(-10px); }
20%, 80% { transform: translateX(10px); }
30%, 50%, 70% { transform: translateX(-10px); }
40%, 60% { transform: translateX(10px); }
100% { transform: translateX(0); } 
}
/* 垂直抖動(dòng) */
@keyframes shakeY { 
0% { transform: translateY(0); }
10%, 90% { transform: translateY(-10px); }
20%, 80% { transform: translateY(10px); }
30%, 50%, 70% { transform: translateY(-10px); }
40%, 60% { transform: translateY(10px); }
100% { transform: translateY(0); } 
}
/* 抖動(dòng) */
.animated.shake {
animation-name: shake;
}
/* 垂直抖動(dòng) */
.animated.shakeY {
animation-name: shakeY;
}

要使用抖動(dòng)效果，只需要將相應(yīng)的CSS類添加到HTML元素上即可，例如：

<div class="animated shake">這是抖動(dòng)效果</div>

通過(guò)這種方式，就可以輕松地為您的Web界面添加動(dòng)態(tài)抖動(dòng)效果，并吸引用戶的注意力。如果你正在尋求一種實(shí)現(xiàn)動(dòng)畫(huà)效果的快速而有效的方法，使用animate.css的抖動(dòng)動(dòng)畫(huà)是一個(gè)很好的選擇。