關於animation-deplay的一點理解

```

.xx{ position:fixed; left:0;right:0; width:100%;height:100%;background:#ff9966;border:1px solid green;}

.xx::before,.xx:after{

content:;

position:absolute;

left:0;top:0;right:0;bottom:0;margin:auto;

background:#000000;

border-radius:100%;

animation:d 1.6s linear infinite;

width:70px;

height:70px;

}

.xx::after{ animation-delay:0.8s;}

@keyframes d{

0%{width:0;height:0;}

100%{width:70px;height:70px;opacity:0;}

}

<div class="xx"></div>

```

animation-delay 目前是一個實驗中的功能。這個屬性檢索或設置對象動畫的延遲時間，該屬性定義動畫於何時開始，即從動畫應用在元素上到動畫開始的這段時間的長度。默認值為0。

我們期待這樣的效果： .xx:after在最初並不參與動畫，也就是這個圓在1s前不會出現在頁面上。

但實際上，如上代碼，瀏覽器會先渲染出.xx::after的css屬性顯示在頁面，到了delay設置的時間時間時，會進行下一步動畫。也就是動畫最初會顯示一個寬高為70px的黑色圓，1s後黑色圓開始keyframes的動畫。然而這並不是我們期待的效果。

- 解決方法：設置 animation-delay的時間為負值。`.xx::after{ animation-delay:-0.8s;}`。

- 負延遲是有效的。類似於0的延遲，這意味著動畫會立即執行，但是會自動按照延遲的絕對值進行進展。

之後遇到相關animation-delay問題時再做補充。