CSS3 抖動動畫

CSS3 抖動動畫可以讓元素在某個方向上震動或擺動，給網頁增加了更多的動態效果，讓用戶視覺上更加舒適和愉悅。

/* 抖動動畫 */
@keyframes shake {
0% {
transform: translateX(0);
}
20% {
transform: translateX(-20px);
}
40% {
transform: translateX(20px);
}
60% {
transform: translateX(-20px);
}
80% {
transform: translateX(20px);
}
100% {
transform: translateX(0);
}
}
/* 應用抖動動畫 */
element:hover {
animation: shake .5s;
}

上面的代碼展示了一個簡單的 CSS3 抖動動畫實現。通過@keyframes定義動畫的關鍵幀，通過transform屬性實現元素在 X 軸上的震動，最后在element:hover上應用抖動動畫，鼠標懸停在元素上時就會觸發動畫效果。

除了抖動動畫，CSS3 還支持更多的動畫效果，如：漸變、旋轉、縮放等等，可以在網頁設計中得到廣泛的應用。