Html CSS无限波纹动画

我想做无限涟漪动画，但它会变得不自然

我不喜欢这种突然的变化，我想让动画永远延续下去。 我怎么做

在代码片段中，由于某种原因，我无法很好地显示它，因此当前的情况是

body{字体大小：62.5%；背景色：#000；}
.涟漪{
保证金：自动；
保证金上限：10雷姆；
背景色：#fff；
宽度：1em；
高度：1公厘；
边界半径：50%；
动画：线性无限；
}
@关键帧波纹{
0% {
盒影：0.7雷姆rgba（255255,0.2），
0.1.5雷姆rgba（255255255,0.2），
0.05雷姆rgba（255255255，0.2）；
}
100% {
盒子阴影：0.01.5雷姆rgba（255255255,0.2），
0.4雷姆rgba（255255255,0.2），
0.08雷姆rgba（255255,0）；
}
}

---

如果希望动画更平滑，则需要将起始值与结束值匹配，以避免出现“跳跃”效果

大概是这样的：

@keyframes ripple {
  0% {
    box-shadow: 0 0 0 0rem rgba($ripple-color, 0.2),
                0 0 0 1rem rgba($ripple-color, 0.2),
                0 0 0 2rem rgba($ripple-color, 0.2),
                0 0 0 5rem rgba($ripple-color, 0.2);
  }
  100% {
    box-shadow: 0 0 0 1rem rgba($ripple-color, 0.2),
                0 0 0 2rem rgba($ripple-color, 0.2),
                0 0 0 5rem rgba($ripple-color, 0.2),
                0 0 0 8rem rgba($ripple-color, 0);
  }
}

---

下面是另一个更容易产生平滑效果的想法。可以使阴影动画保持简单，并考虑伪元素具有相同的延迟动画。诀窍是正确选择延迟/持续时间

我将持续时间设置为

3s

（3个元素），每个元素之间都有

1s

延迟

body{背景色：#000；}
.涟漪{
保证金：自动；
边缘顶部：5雷姆；
背景色：#fff；
宽度：1em；
高度：1公厘；
边界半径：50%；
位置：相对位置；
动画：线性无限；
}
.ripple：：之前，
.涟漪：：之后{
内容：“；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
边界半径：50%；
动画：继承；
动画延迟：1s；
}
.涟漪：：之后{
动画延迟：2s；
}
@关键帧波纹{
0% {
盒影：0.7雷姆rgba（255255,0.2）；
}
100% {
盒影：0 0 0 8rem rgba（255255,0）；
}
}