CSS3 Animation是CSS3中最流行的新特性之一。它使得可以輕松地制作復(fù)雜的動畫效果，無需編寫JavaScript代碼。

/* 例子1：使用關(guān)鍵幀規(guī)則創(chuàng)建一個簡單動畫 */
.box {
width: 100px;
height: 100px;
background-color: red;
animation-name: example; /* 指定動畫名稱 */
animation-duration: 2s;  /* 指定動畫持續(xù)時間 */
animation-timing-function: linear; /* 指定動畫速度曲線 */
}
@keyframes example {
0% {background-color: red;} /* 動畫開始時 */
50% {background-color: yellow;} /* 動畫進(jìn)行到50%時 */
100% {background-color: green;} /* 動畫結(jié)束時 */
}

上面的代碼是一個簡單的關(guān)鍵幀動畫，它會使一個紅色的正方形變成黃色然后變成綠色。其中，animation-name屬性指定了動畫的名稱，后面的@keyframes example就是定義該動畫的關(guān)鍵幀規(guī)則，通過在不同的關(guān)鍵幀設(shè)置不同的CSS屬性值，來實(shí)現(xiàn)動畫效果。

/* 例子2：使用多層動畫創(chuàng)建一個蜜蜂飛舞的效果 */
.bee {
width: 50px;
height: 40px;
background-image: url('bee.png');
background-repeat: no-repeat;
animation-name: beeMove, beeWing; /* 指定兩個動畫名稱 */
animation-duration: 2s, 0.2s; /* 指定它們的持續(xù)時間 */
animation-timing-function: ease-in-out, linear; /* 指定它們的速度曲線 */
animation-iteration-count: infinite, infinite; /* 循環(huán)播放 */
}
@keyframes beeMove {
0% {transform: translateX(0);} /* 在起點(diǎn) */
50% {transform: translateX(150px);} /* 在中間 */
100% {transform: translateX(0);} /* 回到起點(diǎn) */
}
@keyframes beeWing {
0% {background-position: 0 0;} /* 翅膀展開 */
50% {background-position: -50px 0;} /* 翅膀收起 */
100% {background-position: 0 0;} /* 翅膀展開 */
}

上面的例子使用了兩個動畫，一個用于讓蜜蜂來回“飛行”，另一個用于讓蜜蜂的翅膀動起來。這個例子展示了多層動畫的用法，可以將多個不同的動畫效果組合在一起，從而創(chuàng)造出更加豐富多彩的效果。