CSS動畫對角搖動效果是Web設計中常用于增加網頁層次感和元素動態感的一種技巧。下面我們將介紹如何使用CSS來實現對角搖動的動畫效果。

/* 設置動畫關鍵幀 */
@keyframes diagonal-shake {
0% {
transform: rotate(0);
}
25% {
transform: rotate(5deg);
}
50% {
transform: rotate(0);
}
75% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0);
}
}
/* 設置元素樣式 */
.element {
animation-name: diagonal-shake;
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
transform-origin: center center;
}

以上代碼中，我們首先定義了一個關鍵幀動畫diagonal-shake，該動畫包含了 0%、25%、50%、75% 和 100% 的狀態。在四個旋轉狀態中，元素分別順時針和逆時針旋轉了5°，最終回到正常狀態。

隨后我們將該動畫應用到一個具有.element類名的元素中。動畫持續時間為1秒，方向取決于動畫步驟的進度。最后，我們使用transform-origin屬性將元素的旋轉中心設置為中心點，從而使元素圍繞該點旋轉。

以上代碼實現了一個簡單而有效的對角搖動動畫效果。你可以將其應用于多個網頁元素，并通過適當地修改動畫關鍵幀，將其制作成更加豐富多樣的動態效果。