CSS3先后動畫是一種可以讓元素在一段時間內按預設的順序進行變換的動畫效果。這種動畫效果是通過CSS3中的關鍵幀技術實現的，可以讓設計師在網頁設計過程中創造出更加生動的交互效果。

animation: name duration timing-function delay iteration-count direction;

該屬性可以對一個元素進行先后動畫處理。其中，name表示所定義的動畫名稱，duration用于設定動畫的時長，timing-function設置動畫的過渡曲線，delay指定動畫的延遲時間，iteration-count定義動畫的重復次數，而direction則用于定義動畫的播放方向。

使用CSS3先后動畫可以讓元素在一定的時間間隔內產生連續變化，例如通過調整delay屬性可以讓元素的序列發生改變。

.box1{
animation: change-size 3s ease-out 0s infinite normal;
}
.box2{
animation: change-size 3s ease-out 0.5s infinite reverse;
}
.box3{
animation: change-size 3s ease-out 1s infinite alternate;
}
@keyframes change-size {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

在上面的例子中，我們定義了三個元素.box1,.box2,.box3，它們分別應用了相同的動畫名稱change-size。這些元素在使用動畫的同時，通過調整delay屬性使得它們的動畫變得不同，產生了一種先后變換的效果。

總的來說，CSS3先后動畫可以讓網頁設計人員在設計過程中實現更加豐富和生動的交互效果，是網頁設計中必不可少的一部分。