在Web設(shè)計(jì)中，如何讓圖片動(dòng)起來(lái)，讓網(wǎng)站更有趣呢？這時(shí)候，CSS動(dòng)畫(huà)的出現(xiàn)就具有了重要的意義。今天我們就來(lái)學(xué)習(xí)一種簡(jiǎn)單的CSS動(dòng)畫(huà) - 圖片跳轉(zhuǎn)。

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

上述代碼中，我們首先定義了一個(gè)img元素的動(dòng)畫(huà)，指定了名稱、持續(xù)時(shí)間、時(shí)間函數(shù)和動(dòng)畫(huà)結(jié)束后狀態(tài)。接著，通過(guò)@keyframes關(guān)鍵詞定義了一個(gè)名為“jump”的動(dòng)畫(huà)，指定不同時(shí)間點(diǎn)（0%、50%、100%）下圖片的位置。其中，第一個(gè)位置為圖片最初位置，第二個(gè)位置為圖片跳起來(lái)的位置，第三個(gè)位置為圖片回到最初位置。

有關(guān)于CSS動(dòng)畫(huà)的更多內(nèi)容，詳見(jiàn)CSS動(dòng)畫(huà)的教程。