CSS3 Animation 是一種非常酷炫的效果，可以通過動(dòng)畫將圖片或其他元素帶入新的維度。它是 CSS3 規(guī)范的一部分，并且在許多現(xiàn)代瀏覽器中都得到了支持。

/*定義關(guān)鍵幀*/
@keyframes slidein {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
/*創(chuàng)建動(dòng)畫*/
.image {
animation: slidein 1s;
}

使用 CSS3 animation 動(dòng)畫，你可以很容易地定義關(guān)鍵幀并創(chuàng)建動(dòng)畫。上面的示例定義了一個(gè)名為 slidein 的關(guān)鍵幀，它從滑動(dòng)屏幕左側(cè)到元素的初始位置。

/*使圖片旋轉(zhuǎn)*/
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*使用循環(huán)的動(dòng)畫*/
.image {
animation: rotate 2s linear infinite;
/*線性動(dòng)畫和無限循環(huán)*/
}

除了通過關(guān)鍵幀動(dòng)畫實(shí)現(xiàn)簡單的平移動(dòng)畫之外，CSS3 Animation 還可以實(shí)現(xiàn)更復(fù)雜的動(dòng)畫效果。例如，我們可以使用 rotate 關(guān)鍵幀來旋轉(zhuǎn)圖片，并使用 linear 來控制動(dòng)畫速度，使用 infinite 來使動(dòng)畫無限循環(huán)。

總之，CSS3 Animation 是一個(gè)非常有用和強(qiáng)大的特性，可以使你在網(wǎng)站上使用動(dòng)畫來增加用戶體驗(yàn)和吸引人的效果。無論是簡單的平移還是復(fù)雜的旋轉(zhuǎn)，都可以使用 CSS3 Animation 實(shí)現(xiàn)。只要您熟練掌握這項(xiàng)技術(shù)，就可以讓您的網(wǎng)站變得更加生動(dòng)和生氣勃勃。