在前端開發中，CSS動畫是一項極為重要的技術，可以大大提升頁面的交互性和視覺效果。今天我們來講一下如何實現一種特殊的CSS動畫效果：從下往上抖動。

/* CSS代碼塊 */
@keyframes shake {
/* 抖動動畫 */
0% { transform: translateY(0); }
10%, 30%, 50%, 70%, 90% { transform: translateY(2px); }
20%, 40%, 60%, 80% { transform: translateY(-2px); }
100% { transform: translateY(0); }
}
/* 使用動畫 */
.element {
animation-name: shake;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}

上述代碼中，我們定義了一個名為“shake”的動畫，并使用transform屬性來實現元素的上下抖動。注意到我們在關鍵幀中指定了具體的時間點，以控制抖動的頻率和幅度。

在元素上應用動畫時，我們設置了動畫名稱、持續時間、時間函數和重復次數等屬性，以實現恰到好處的動畫效果。最后，我們還可以通過設置animation-delay屬性來延遲動畫的開始時間，從而讓多個元素的抖動動畫錯開。

總結一下，通過使用CSS的動畫技術，我們可以輕松地實現各種各樣的動畫效果，從而優化頁面的用戶體驗。當你需要實現從下往上抖動的動畫效果時，可以參考本文提供的代碼示例進行實現。