CSS動畫是網頁設計中常用的手段之一，有時候我們需要在元素加載或者事件觸發(fā)之后才能觸發(fā)動畫，這就需要CSS延時執(zhí)行動畫。下面我們來看一下如何實現它。

.animation {
animation-name: animate;
animation-duration: 1s;
animation-delay: 2s;
animation-fill-mode: forwards;
}
@keyframes animate {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

上述代碼定義了一個.animation類，它會在2秒延時之后才執(zhí)行1秒的動畫，最后保持動畫結束的狀態(tài)（animation-fill-mode: forwards）。

除了animation-delay屬性之外，我們還可以使用transition-delay屬性來實現類似的效果。

.animation {
transition: opacity 1s ease-in-out 2s;
opacity: 0;
}
.animation.show {
opacity: 1;
}

上述代碼定義了一個.animation類，它在2秒延時之后才執(zhí)行1秒的從透明到不透明的等速度漸變動畫。點擊某個元素之后，我們再以.show類為條件，將元素的透明度設置為1，即可觸發(fā)動畫。

通過使用animation-delay或者transition-delay屬性，我們可以在元素加載或者事件觸發(fā)之后才觸發(fā)動畫，達到更好的動畫效果。