CSS3動(dòng)畫擁有許多令人驚嘆的效果，但在某些情況下我們可能需要分階段執(zhí)行動(dòng)畫。比如當(dāng)我們希望在頁(yè)面上展示不同的元素時(shí)，為了增加頁(yè)面的動(dòng)態(tài)效果，我們可以讓它們分開(kāi)執(zhí)行CSS3動(dòng)畫。

為了實(shí)現(xiàn)動(dòng)畫分開(kāi)執(zhí)行，我們可以使用以下代碼：

.animation {
animation-delay: 1s;
animation-name: fadeIn;
animation-duration: 2s;
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.animation-two {
animation-delay: 3s;
animation-name: scaleIn;
animation-duration: 2s;
}
@keyframes scaleIn {
0% {transform: scale(0);}
100% {transform: scale(1);}
}

這段代碼中，我們定義了兩個(gè)動(dòng)畫類，分別命名為“.animation”和“.animation-two”。我們分別為它們?cè)O(shè)置了animation-delay屬性，分別為1秒和3秒，這樣它們就能分別在不同的時(shí)間執(zhí)行動(dòng)畫。

.animation類對(duì)應(yīng)的動(dòng)畫名稱為fadeIn（淡入），使用了animate庫(kù)自帶的關(guān)鍵幀（@keyframes）屬性來(lái)定義從透明度0到1的動(dòng)畫。

.animation-two類對(duì)應(yīng)的動(dòng)畫名稱為scaleIn（縮放），使用了animate庫(kù)自帶的關(guān)鍵幀屬性來(lái)定義從0縮放到1的動(dòng)畫。

分開(kāi)執(zhí)行動(dòng)畫不僅能為頁(yè)面增加動(dòng)態(tài)效果，還能減少頁(yè)面加載速度。通過(guò)使用CSS3動(dòng)畫分階段執(zhí)行的方法，我們可以輕松地實(shí)現(xiàn)這種復(fù)雜但有趣的效果！