CSS动画如何从中途开始播放

事情是这样的，前阵子在开发的网页背景有个星空，于是就想说不如来加点星空的闪烁特效吧!

于是就先写了这样的CSS：

不过这样当然是不够的，每个星星同时闪烁太不自然了，于是我加了一点随机的delay：

看起来是会随机闪烁了，但在页面刚载入进去的时候因为很多星星都还在delay 中，画面特别的空虚。这时候我就想了，有没有可能让CSS 动画从中途开始播放?

上网一查，原来还真的可以!

从中途开始播放!

只要把animation-delay的值改成负数就行了!比如说animation-delay: -3s就是指从3 秒开始的动画。于是最后我把程式码改成了这样：

结果

GIF 录起来品质好像不是很好，但还是放一下好了：