在網頁設計中，動畫效果的運用往往可以為頁面帶來更好的視覺體驗。而CSS中的動畫效果更是設計師們的必備工具之一。在CSS中，我們可以通過組合多個動畫效果，創造出更加豐富、多變的動畫效果。下面，我們將為大家介紹如何使用CSS組合動畫效果圖。

/* 動畫效果1：變形 */
@keyframes transform {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* 動畫效果2：位移 */
@keyframes translate {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(50px, 50px);
}
100% {
transform: translate(0, 0);
}
}
/* 動畫效果3：透明度 */
@keyframes opacity {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
/* 組合動畫效果 */
#animation {
animation: transform 1s ease, translate 1s ease, opacity 1s ease;
}

如上所示，我們首先定義了3個不同的動畫效果。在定義時，需要使用關鍵幀@keyframes來描述動畫的執行過程。簡單來說，就是通過對元素樣式的變化，使其過渡到從開始狀態到結束狀態的過程中。這里我們分別定義了“變形”、“位移”和“透明度”三種動畫效果，描述了它們的不同變化過程。

接下來，我們通過#animation來組合這三個動畫效果。在使用animation屬性時，需要設置動畫名稱、動畫持續時間、動畫速度方式等參數。這里我們將所有的動畫效果都設置為1秒鐘持續時間，使用“ease”來確定動畫速度方式。

最后，我們只需要在HTML中將需要添加動畫效果的元素定義為id為“animation”的元素即可。這樣，我們就可以清楚地看到一個同時包含多個動畫效果的組合動畫效果了。