在網(wǎng)頁(yè)設(shè)計(jì)中，動(dòng)態(tài)化的效果往往能夠吸引用戶的眼球，圖片左右飛入就是一種常見的效果。通過CSS，我們可以簡(jiǎn)單快捷地實(shí)現(xiàn)這個(gè)效果。

/* 定義動(dòng)畫，這里采用@keyframes規(guī)則 */
@keyframes slidein {
from {
margin-left: -100%;
/* 讓圖片在左側(cè)消失 */
}
to {
margin-left: 0%;
/* 讓圖片從左側(cè)移入 */
}
}
/* 當(dāng)圖片被觸發(fā)時(shí)，發(fā)生動(dòng)畫效果 */
img {
animation: slidein 2s;
/* 定義動(dòng)畫的時(shí)間 */
}

這段CSS代碼中，我們首先定義了一個(gè)名為slidein的動(dòng)畫。在動(dòng)畫中，我們定義了圖片最初時(shí)在左側(cè)、動(dòng)畫結(jié)束時(shí)從左側(cè)移入的狀態(tài)。接著，我們通過為img元素添加animation屬性將動(dòng)畫關(guān)聯(lián)到圖片元素上，從而使得當(dāng)圖片被加載時(shí)就執(zhí)行動(dòng)畫。

需要注意的是，CSS3動(dòng)畫效果目前對(duì)于一些歷史版本的瀏覽器使用可能存在一些問題。因此，在應(yīng)用動(dòng)畫效果時(shí)需要謹(jǐn)慎抉擇何種動(dòng)畫方式，以兼容更多的設(shè)備。