animated.css是一個非常流行的CSS動畫庫，它能夠幫助我們輕松添加各種動態效果到我們的網站中。其中最重要的一點就是可以在HTML中簡單添加這些動態樣式。

然而，很多人并不知道animated.css中動畫效果的播放順序。這就導致了很多問題，比如可能會出現只顯示一些效果或順序錯亂的情況。因此，在使用animated.css時，需要了解其動畫效果的播放順序。

/* 以下是animated.css動畫效果的播放順序 */
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.infinite {
animation-iteration-count: infinite;
}
@keyframes bounce {
from, 20%, 53%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 0, 0);
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0, -4px, 0);
}
}
.bounce {
animation-name: bounce;
}
@keyframes flash {
from, 50%, to {
opacity: 1;
}
25%, 75% {
opacity: 0;
}
}
.flash {
animation-name: flash;
}
/* 其他動畫效果的播放順序，可以參考animated.css官網 */

從以上代碼可以看到，animated.css中動畫效果的播放順序是：先定義.animated樣式，再定義.animated.infinite樣式（如果動畫需要無限循環），最后定義動畫的具體屬性。這些屬性中，animation-duration用來定義動畫持續時間，animation-fill-mode用來定義動畫的結束狀態。

總的來說，了解animated.css動畫效果的播放順序，可以讓我們更好地使用這個強大的CSS動態效果庫。