CSS3 Animation 是 CSS3 中新增的一種動(dòng)畫效果，比之前的純 CSS 動(dòng)畫更加豐富和復(fù)雜，提供了更多的動(dòng)畫屬性和方法。以下是一些 CSS3 Animation 實(shí)例：

/* 整個(gè) div 從上往下掉落 */
div{
animation: drop 2s;
}
@keyframes drop {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
}

上方代碼通過 animation 屬性綁定了一個(gè)名為 drop 的關(guān)鍵幀動(dòng)畫，使整個(gè) div 元素從上往下掉落，掉落時(shí)間為 2s。在 keyframes 中定義了具體的動(dòng)畫效果，從上往下移動(dòng)一個(gè)整個(gè)頁面高度。

/* 圖片旋轉(zhuǎn) */
img{
animation: rotate 3s infinite linear;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

上方代碼通過 animation 屬性綁定了一個(gè)名為 rotate 的關(guān)鍵幀動(dòng)畫，使圖片元素在 3s 中無限次旋轉(zhuǎn)。在 keyframes 中定義了具體的動(dòng)畫效果，從 0% 到 100% 的時(shí)間內(nèi)將圖片元素從 0deg 旋轉(zhuǎn)到 360deg。

/* 文字縮放 */
h1{
animation: scale 1s ease-out;
}
@keyframes scale {
0% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}

上方代碼通過 animation 屬性綁定了一個(gè)名為 scale 的關(guān)鍵幀動(dòng)畫，使標(biāo)題元素在 1s 中縮小到原大小。在 keyframes 中定義了具體的動(dòng)畫效果，從 0% 到 100% 的時(shí)間內(nèi)將標(biāo)題元素從原來的大小縮小到一半的大小。

以上就是一些 CSS3 Animation 實(shí)例，通過使用關(guān)鍵幀動(dòng)畫可以實(shí)現(xiàn)更加復(fù)雜的動(dòng)畫效果，讓網(wǎng)頁更加生動(dòng)有趣。