在CSS中，可以使用animation-delay屬性來(lái)設(shè)置動(dòng)畫的順序。animation-delay屬性用于指定動(dòng)畫在瀏覽器完成加載后多久開始播放，通過(guò)給每個(gè)動(dòng)畫元素設(shè)置不同的animation-delay值，我們可以控制動(dòng)畫的順序。

假設(shè)我們有兩個(gè)動(dòng)畫元素，分別使用@keyframes定義了兩個(gè)動(dòng)畫，我們可以給***個(gè)動(dòng)畫元素設(shè)置animation-delay: 0s，第二個(gè)動(dòng)畫元素設(shè)置animation-delay: 2s，這樣第二個(gè)動(dòng)畫就會(huì)比***個(gè)動(dòng)畫晚2秒開始播放。

@keyframes animation1 {
  from { left: 0; }
  to { left: 100px; }
}
@keyframes animation2 {
  from { color: red; }
  to { color: blue; }
}
.element1 {
  animation: animation1 2s;
  animation-delay: 0s;
}
.element2 {
  animation: animation2 2s;
  animation-delay: 2s;
}

在上面的代碼中，.element1的動(dòng)畫會(huì)立即開始播放，而.element2的動(dòng)畫則會(huì)晚2秒開始播放，這樣，我們就可以通過(guò)調(diào)整animation-delay值來(lái)重新排序動(dòng)畫。

需要注意的是，如果兩個(gè)動(dòng)畫的animation-delay值相同，那么它們的播放順序可能與它們?cè)贑SS代碼中的順序相同，如果它們的animation-delay值不同，那么播放順序就會(huì)按照animation-delay值來(lái)排序，當(dāng)我們需要控制動(dòng)畫順序時(shí)，應(yīng)該優(yōu)先考慮設(shè)置animation-delay值。