Css动画-动画延迟

我试图用css动画模拟信号动画，但我似乎无法理解动画延迟的概念。如果你看这里

。实时动画{
边缘顶部：20px；
位置：相对位置；
变换：缩放（0.5）旋转（45度）；
变换原点：5%0%；
}
.实时动画>div{
动画：sk反弹播放3s无限向前；
}
.圆圈1{
动画延迟：2s；
}
.圆圈2{
动画延迟：1s；
}
@关键帧sk bouncedelay{
0% {
不透明度：0；
}
100% {
不透明度：1；
}
}
.圆圈{
位置：相对位置；
宽度：16em；
高度：16em；
边界半径：50%；
背景：透明；
边框：20px实心透明；
边框顶部颜色：深蓝色；
位置：绝对位置；
排名：0；
左：0；
不透明度：0；
}
.圆圈2{
顶部：40px；
宽度：12em；
高度：12公分；
左：33像素；
}
.圆圈3{
顶部：80px；
宽度：8em；
高度：8em；
左：66px；
}

我的解决方案：

。实时动画{
边缘顶部：20px；
位置：相对位置；
变换：缩放（0.5）旋转（45度）；
变换原点：5%0%；
}
.circle1、.circle2、.circle3{
动画：4s无限轻松；
动画延迟：1s；
}
.圆圈1{
动画名称：circle1；
}
.圆圈2{
动画名称：circle2；
}
.圆圈3{
动画名称：circle3；
}
@关键帧圆圈1{
0%{ 
不透明度：0；
}
25%{
不透明度：0；
}
50%{
不透明度：0；
}
75%{
不透明度：1；
}
100% { 
不透明度：0；
}
}
@关键帧圆圈2{
0%{ 
不透明度：0；
}
25%{
不透明度：0；
}
50%{
不透明度：1；
}
75% { 
不透明度：1；
}
100%{
不透明度：0；
}
}
@关键帧圆圈3{
0%{ 
不透明度：0；
}
25%{
不透明度：1；
}
50%{
不透明度：1；
}
75% { 
不透明度：1；
}
100%{
不透明度：0；
}
}
.圆圈{
位置：相对位置；
宽度：16em；高度：16em；
边界半径：50%；
背景：透明；
边框：20px实心透明；
边框顶部颜色：深蓝色；
位置：绝对位置；
排名：0；
左：0；
不透明度：0；
}
.圆圈2{
顶部：40px；
宽度：12em；
高度：12公分；
左：33像素；
}
.圆圈3{
顶部：80px；
宽度：8em；
高度：8em；
左：66px；
}

据我所知，您的问题需要如下：

进度\要素

.circle1

.circle2

.circle3

0% 0 0 0 25% 0 0 1. 50% 0 1. 1. 75% 1. 1. 1. 100% 0 0 0

---

这个怎么样？不，一旦动画完成，一切都需要从头开始。这个简直疯了。。

Update - The pen below has been updated to show the end results.