CSS3動畫可以實現頁面元素的動態效果，其中多個動畫的組合可以產生更加絢爛、生動的效果。

.animated {
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes slideInLeft {
0% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.slideInLeft {
-webkit-animation-name: slideInLeft;
animation-name: slideInLeft;
}
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}

在上述代碼中，我們定義了兩個動畫：從左側滑入的 slideInLeft 和淡入效果的 fadeIn。通過使用 .animated 類，我們可以使指定元素繼承這些動畫。我們使用 keyframes 定義了每個動畫的幀數，以及在每個關鍵幀時元素的樣式。理解了這些基本原理之后，我們就可以開始創建自己的復雜動畫了。

除了使用多個動畫之外，還可以通過設置動畫順序、延遲等屬性，來控制動畫的細節。這可以在很大程度上影響到最終效果的表現。因此，學習 CSS3 動畫的同時，還需要加強對 HTML 和 JavaScript 的掌握，才能真正靈活運用。