用于重复闪烁效果的CSS关键帧（wifi）

所以我正试图为一个项目创建一个Wifi。首先，圆圈应该是可见的，然后是上面的圆圈，依此类推。在所有符号可见后，应等待2秒钟，然后再次启动。您可以在此处查看我的当前状态：

我在css中使用的是

animation: blink 3s infinite;
animation-delay: 1s;

及

我想通过改变延迟和其他值，我可以让它看起来像那样，但它不起作用。我做错了什么

正文{
保证金：0；
填充：0；
}
#身体{
利润率：200px自动0px；
宽度：280px；
高度：84px；
背景色：#c9e3ed；
边界半径：30px 30px 10px 10px/20px 20px 10px 10px；
位置：相对位置；
}
#无线信号{
右边框：12px实心#ee7230；
边框底部：12px实心#ee7230；
边框顶部：1px实心#fff；
左边框：1px实心#fff；
变换：旋转（-135度）；
位置：绝对位置；
}
#wifi。信号：第一个孩子{
左：50%；
顶部：-160px；
左边距：-56px；
宽度：100px；
高度：100px；
边界半径：0 100px 0；
动画：闪烁3s无限；
动画延迟：1s；
}
#wifi.信号：第n个孩子（2）{
左：50%；
顶部：-130像素；
左边距：-43px；
宽度：74px；
高度：74px；
边界半径：074px0；
动画：闪烁3s无限；
动画延迟：2s；
}   
#wifi。信号：最后一个孩子{
左：50%；
顶部：-100px；
左边距：-30px；
宽度：48px；
高度：48px；
边界半径：048px0；
动画：闪烁3s无限；
动画延迟：3s；
}
#wifi。信号：最后一个孩子：之后{
内容：''；
位置：绝对位置；
右：35%；
底部：35%；
高度：30px；
宽度：30px；
背景色：#ee7230；
边界半径：50%；
左边距：-25px；
动画：闪烁3s无限；
动画延迟：4s；
}
@关键帧闪烁{
0%{不透明度：0}
49%{不透明度：0}
50%{不透明度：1}
}

---

创建多个动画，每个动画将以不同的百分比启动动画，然后可以跳过动画延迟

正文{
保证金：0；
填充：0；
}
#身体{
利润率：200px自动0px；
宽度：280px；
高度：84px；
背景色：#c9e3ed；
边界半径：30px 30px 10px 10px/20px 20px 10px 10px；
位置：相对位置；
}
#无线信号{
右边框：12px实心#ee7230；
边框底部：12px实心#ee7230；
边框顶部：1px实心#fff；
左边框：1px实心#fff；
变换：旋转（-135度）；
位置：绝对位置；
}
#wifi。信号：第一个孩子{
左：50%；
顶部：-160px；
左边距：-56px；
宽度：100px；
高度：100px；
边界半径：0 100px 0；
动画：闪烁4s无限；
}
#wifi.信号：第n个孩子（2）{
左：50%；
顶部：-130像素；
左边距：-43px；
宽度：74px；
高度：74px；
边界半径：074px0；
动画：blink3 4s无限；
}
#wifi。信号：最后一个孩子{
左：50%；
顶部：-100px；
左边距：-30px；
宽度：48px；
高度：48px；
边界半径：048px0；
动画：blink2 4s无限；
}
#wifi。信号：最后一个孩子：之后{
内容：''；
位置：绝对位置；
右：35%；
底部：35%；
高度：30px；
宽度：30px；
背景色：#ee7230；
边界半径：50%；
左边距：-25px；
动画：blink1 4s无限；
}
@关键帧闪烁1{
0% {
不透明度：0
}
19% {
不透明度：0
}
20% {
不透明度：1
}
}
@关键帧闪烁2{
0% {
不透明度：0
}
39% {
不透明度：0
}
40% {
不透明度：1
}
}
@关键帧闪烁3{
0% {
不透明度：0
}
59% {
不透明度：0
}
60% {
不透明度：1
}
}
@关键帧闪烁4{
0% {
不透明度：0
}
79% {
不透明度：0
}
80% {
不透明度：1
}
}

---

我会使用一个元素来实现这一点，以使控件更易于使用动画，并且代码更少：

.wifi{
利润率：20px；
宽度：290px；
高度：290px；
显示：内联块；
背景：
/*中心*/
径向梯度（中心圆圈，橙色20px，透明21px），
/*一些白色来隐藏部分圆圈*/
线性梯度（45度，#fff 50%，透明0），
线性梯度（-45度，#fff 50%，透明0），
/*--*/
/*1*/
径向梯度（中心圆，
透明40px，橙色41px，
橙色61px，透明62px），
/*2*/
径向梯度（中心圆，
透明80px，橙色81px，
橙色101px，透明102px），
/*3*/
径向梯度（中心圆，
透明120px，橙色121px，
橙色141px，透明142px）；
动画：改变5s线性无限；
}
@关键帧改变{
0%,20% {
背景大小：0，自动，自动，0，0,0；
}
20%,40% {
背景尺寸：自动，自动，自动，0，0,0；
}
40%,60% {
背景尺寸：自动，自动，自动，自动，0,0；
}
60%,80% {
背景尺寸：自动，自动，自动，自动，自动，0；
}
80%,100% {
背景尺寸：自动，自动，自动，自动，自动，自动；
}
}

---

您好，请在问题中加入a。JSFiddle链接很好，但是当JSFiddle关闭时，我们也需要这里的代码。当然可以：）它应该是什么样子？类似这样的东西，但没有过渡和缓慢，这样做需要您更熟练地使用CSS；-）@TylerH是的，这就是目的，学习更多的技能，尤其是减少代码；）任何能缩短我的代码并提高我的技能的建议都会很有用：）@Kazu如果你感兴趣，我会添加更多选项；）非常感谢你。。。这就是我喜欢stackoverflow的原因：）你们真是帮了大忙

@keyframes blink {
    0% {opacity: 0}
    49%{opacity: 0}
  50%{opacity: 1}
}