CSS動畫是Web開發中不可缺少的一部分，而上下抖動動畫在Web應用中應用廣泛。本文將介紹如何利用CSS實現上下抖動動畫。

.animation {
animation-name: shake;
animation-duration: 0.5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes shake {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(0, -5px);
}
50% {
transform: translate(0, -10px);
}
75% {
transform: translate(0, -5px);
}
100% {
transform: translate(0, 0);
}
}

上面的代碼片段展示了一個名為“shake”的動畫。該動畫會將元素向上下抖動，每0.5秒播放一次無限次數。使用一個關鍵幀動畫，通過改變元素的transform屬性，來給元素制造上下抖動的效果。通過細致的調整，可以讓元素的上下抖動動畫更加自然。

使用上下抖動動畫可以提高用戶的注意力，并且增添頁面的動態效果。無論是按鈕、文本框或者是其他元素，都可以通過添加上下抖動動畫來吸引用戶的眼球。同時，上下抖動動畫具有簡單易行的特點，通過簡單的CSS代碼即可實現。希望本文能夠對大家理解利用CSS實現上下抖動動畫有所幫助。