CSS定時(shí)自動(dòng)抖動(dòng)效果能夠給網(wǎng)頁(yè)添加一些動(dòng)態(tài)的元素，使得網(wǎng)站更加有趣。它的實(shí)現(xiàn)方法非常簡(jiǎn)單，只需要用到CSS3的動(dòng)畫屬性。

.shake {
animation: shake 1s ease-in-out infinite;
}
@keyframes shake {
0% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90%, 100% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}

以上代碼實(shí)現(xiàn)了一個(gè)抖動(dòng)動(dòng)畫效果。通過(guò)給一個(gè)元素添加class “shake” ，這個(gè)元素就能夠自動(dòng)開(kāi)始抖動(dòng)了。

代碼解析：

1）.shake {}：選擇器用于選中需要添加抖動(dòng)效果的元素。

2）animation: shake 1s ease-in-out infinite;：這行代碼設(shè)置了動(dòng)畫的名稱(shake)，動(dòng)畫時(shí)長(zhǎng)(1s)，時(shí)間函數(shù)(ease-in-out)，以及動(dòng)畫重復(fù)次數(shù)(infinite)。

3）@keyframes shake {}：通過(guò)@keyframes 創(chuàng)建一個(gè)動(dòng)畫規(guī)則。

4）0% { transform: translateX(0); }：設(shè)置動(dòng)畫初始狀態(tài)，即不進(jìn)行任何變換。

5）10%, 30%, 50%, 70%, 90%, 100% { transform: translateX(-10px); }：動(dòng)畫抖動(dòng)的核心，這句代碼將元素在X軸上向左移動(dòng)10px，實(shí)現(xiàn)抖動(dòng)效果。

6）20%, 40%, 60%, 80% { transform: translateX(10px); }：將元素在 X 軸上向右移動(dòng)10px。

最后，我們需要將這個(gè)類添加到要抖動(dòng)的元素上，例如：

<div class="shake">
這里是要添加抖動(dòng)效果的元素
</div>

這樣就可以讓我們的元素自動(dòng)在頁(yè)面中進(jìn)行抖動(dòng)了！