CSS动画：拉伸和压缩圆弧

我需要创建一个动画效果，其中一个弧是脉冲-在180度和102度的长度之间交替。它还需要同时在两侧对称地拉长/压缩。我有这个弧（）的svg：

蓝色光束
用草图创建。

理解“脉搏”有很多方法。我要一个简单的。（就写下来而言）

弧的笔划具有“淡入”效果，通过改变不透明度值的径向渐变实现。如果更改渐变延伸的半径，似乎可以看到较长或较短的笔划，直到其逐渐变为透明。你不会得到精确的长度，但它可能或多或少为你工作

现在出现了一个缺点：可以使用CSS设置动画，但不适用于SVG笔划。您需要SVG

元素，并且需要为其

r

属性设置动画。这是一个XML属性，因此不可使用CSS设置动画，而只能使用。这些都不是为Edge/IE实现的，但至少有一些基于Javascript的多边形填充，比如

（理论上，SVG 2定义为一个表示属性，可以通过

transform

函数使用CSS设置动画，但在实践中，浏览器尚未实现这一点。）

我冒昧地用一个片段交换了您的图像链接，在这里我们可以看到源代码。非常感谢您编辑了这个问题并给出了很好的回答！这帮我摆脱了很多头痛！