使用CSS添加動畫可以為網站增添自然流暢的動態效果。通常我們可以通過關鍵幀、過渡和變換來實現這一點。但如果要在一個元素上同時應用多個動畫呢？

可以通過以下方法實現：

.animation {
animation-name: slideIn, fadeIn;
animation-duration: 1s, 2s;
animation-delay: 0s, 1s;
animation-fill-mode: forwards, backwards;
}
@keyframes slideIn {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

上述代碼設置了兩種不同的動畫，分別是slideIn和fadeIn。animation-duration指定了兩種動畫的執行時間，animation-delay則指定了第二個動畫會比第一個動畫延遲1秒執行。同時，animation-fill-mode可以指定動畫執行完畢時保持最后一幀的狀態。

需要注意的是，多個動畫名稱之間要使用逗號分隔。另外，動畫效果可以更加豐富，如應用貝塞爾曲線或設置動畫重復次數。如果需要設置不同的延遲或時間，可以單獨為每個動畫添加一個class來實現。