CSS動畫是網頁設計中很重要的一部分，其中圖片上下動畫效果是一種非常常見的特效。通過CSS代碼，我們可以快速的為網頁添加這種特效。下面是一段示例代碼，幫助你快速理解圖片上下動畫的實現。

/*在CSS中，我們使用 @keyframes 關鍵詞來定義一個動畫*/
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);/*設定垂直方向上的偏移量*/
}
40% {
transform: translateY(-20px);
}
60% {
transform: translateY(-10px);
}
}
/*為需要上下動畫的圖片添加屬性*/
img {
animation: bounce 1s ease-in-out infinite;/*引用bounce動畫*/
}
/*這段代碼中的 Keyframes 效果圖如下：*/

上述代碼中，我們首先定義了一個bounce的動畫，然后將圖片的animation屬性引用了這個動畫。圖片會起伏上下，直到頁面加載出其他內容或者頁面關閉。其中，我們為bounce動畫設定了五個關鍵幀（0%、20%、50%、80%、100%）。這五個關鍵幀定義了圖片動畫的狀態。

通過這樣簡單的CSS代碼，我們可以為頁面的設計添加活力和趣味性。此外，通過靈活的運用 CSS，我們還可以添加更多的動畫特效，比如懸浮、旋轉、翻滾等，為頁面的交互和視覺效果提升不少。