关于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问题时再做补充。