CSS 動畫是一種優雅的方式讓網站更生動。而且，使用 CSS 動畫的過程并不復雜，學一學如何設置動畫順序，你就可以為你的網站添加更多魅力了。

首先，要了解 CSS 動畫中的關鍵幀（@keyframes）。關鍵幀是用于定義動畫過程中的關鍵節點的。我們可以定義多個關鍵幀，然后將它們組合在一起形成動畫。例如：

@keyframes myAnimation {
0% { opacity: 0; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
.element {
animation: myAnimation 2s;
}

這段代碼定義了一個名為myAnimation的動畫，它將一個元素的不透明度從 0 到 1 過渡。注意，我們將動畫賦值給了一個叫做.element的元素，它將運行 2 秒鐘。這個動畫是有序的：它會按照定義的順序運行從而創建一個流暢的動畫效果。

如果你想要給動畫添加更多元素，你可以使用多個關鍵幀。例如：

@keyframes myAnimation {
0% { opacity: 0; transform: scale(0); }
25% { opacity: 0.5; }
50% { opacity: 0.75; transform: scale(1.2); }
75% { opacity: 0.9; transform: scale(0.8); }
100% { opacity: 1; transform: scale(1); }
}
.element {
animation: myAnimation 2s;
}

這個動畫由五個關鍵幀組成，每一幀都將元素進行變換。你也可以選擇使用animation-timing-function屬性來改變動畫的執行速率。

最終，你也可以使用animation-direction屬性來改變動畫的順序。這個屬性允許你指定動畫在運動下一個周期時的方向，有以下四個值：

• normal：正序播放
• reverse：倒序播放
• alternate：正、倒序交替播放
• alternate-reverse：倒、正序交替播放

例如：

.element {
animation: myAnimation 2s alternate;
}

這段代碼將會使得動畫交替正、倒播放。

一旦你理解了關鍵幀、動畫序列、執行速率和方向，你就可以自由地創建各種各樣的 CSS 動畫了。祝你好運！