CSS動畫使網頁更具交互性和吸引力，然而，當我們需要在同一個元素上播放多個動畫時，可能需要掌握有序播放這些動畫的技能。下面介紹一種常用的方法。

首先，我們需要使用CSS的關鍵幀（@keyframes）規則來定義動畫內容，例如：

@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes zoom-in {
from { transform: scale(0.5); }
to { transform: scale(1); }
}

上面的代碼定義了兩個動畫，一個是淡入動畫，一個是放大動畫。接下來我們可以將它們賦給同一個元素，并為其設置動畫時間、延遲和動畫播放方式：

.box {
animation-name: fade-in, zoom-in;
animation-duration: 1s, 0.5s;
animation-delay: 0s, 1s;
animation-timing-function: ease-out, ease-in;
}

代碼中，我們使用逗號分隔動畫名稱，表示按照這個順序播放動畫。實際上，我們還可以使用關鍵詞“alternate”來讓動畫反向播放，使用“forwards”和“backwards”來控制動畫結束后最終狀態的保留或被清除。

總之，使用CSS關鍵幀規則和動畫屬性，我們可以創建多個有序動畫，使網頁更生動有趣。