在Web設計中，如何讓圖片動起來，讓網站更有趣呢？這時候，CSS動畫的出現就具有了重要的意義。今天我們就來學習一種簡單的CSS動畫 - 圖片跳轉。

img {
animation-name: jump; /* 指定動畫名稱 */
animation-duration: 1s; /* 指定動畫持續時間 */
animation-timing-function: ease-in-out; /* 指定動畫時間函數 */
animation-fill-mode: forwards; /* 指定動畫結束后的狀態 */
}
@keyframes jump {
0% {
transform: translateY(0); /* 最開始圖片的位置 */
}
50% {
transform: translateY(-50px); /* 圖片跳起時的位置 */
}
100% {
transform: translateY(0); /* 圖片回到最初位置 */
}
}

上述代碼中，我們首先定義了一個img元素的動畫，指定了名稱、持續時間、時間函數和動畫結束后狀態。接著，通過@keyframes關鍵詞定義了一個名為“jump”的動畫，指定不同時間點（0%、50%、100%）下圖片的位置。其中，第一個位置為圖片最初位置，第二個位置為圖片跳起來的位置，第三個位置為圖片回到最初位置。

有關于CSS動畫的更多內容，詳見CSS動畫的教程。