如何做这个CSS动画？（定时功能）

我想要这样的动画：

（下面的蓝线是运动的图像。lol）

我试着用立方贝塞尔制作，但没用

---

我对css动画了解不多，但立方贝塞尔可以添加除第一个和最后一个之外的点？
在我看来，我觉得我应该加分

Q。像这样的css动画应该使用什么样的曲线

---

这在CSS动画-Gui Magnani中是不可能的

如果手动设置动画时间和关键帧，则可以接近图形

.container{
位置：相对位置；
高度：90vh；
}
.圆圈{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
边界半径：50%；
宽度：15px；
高度：15px；
方框阴影：0px 0px 0px 5px绿色；
动画：脉冲2s线性无限；
}
@关键帧脉冲{
0% {
方框阴影：0px 0px 0px 10px绿色；
宽度：1px；
高度：1px；
}
20% {
方框阴影：0px 0px 0px 100px绿色；
宽度：1px；
高度：1px；
}
30% {
方框阴影：0px 0px 0px 90px绿色；
宽度：1px；
高度：1px；
}
90% {
方框阴影：0px 0px 0px 10px绿色；
宽度：300px；
高度：300px；
}
95% {
方框阴影：0px 0px 0px 0px绿色；
宽度：300px；
高度：300px；
}
100% {
方框阴影：0px 0px 0px 0px绿色；
宽度：290px；
高度：290px；
}
}

---

这在CSS动画-Gui Magnani中是不可能的

如果手动设置动画时间和关键帧，则可以接近图形

.container{
位置：相对位置；
高度：90vh；
}
.圆圈{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
边界半径：50%；
宽度：15px；
高度：15px；
方框阴影：0px 0px 0px 5px绿色；
动画：脉冲2s线性无限；
}
@关键帧脉冲{
0% {
方框阴影：0px 0px 0px 10px绿色；
宽度：1px；
高度：1px；
}
20% {
方框阴影：0px 0px 0px 100px绿色；
宽度：1px；
高度：1px；
}
30% {
方框阴影：0px 0px 0px 90px绿色；
宽度：1px；
高度：1px；
}
90% {
方框阴影：0px 0px 0px 10px绿色；
宽度：300px；
高度：300px；
}
95% {
方框阴影：0px 0px 0px 0px绿色；
宽度：300px；
高度：300px；
}
100% {
方框阴影：0px 0px 0px 0px绿色；
宽度：290px；
高度：290px；
}
}

这在CSS动画中是不可能的，立方体贝塞尔只是为了简化动画，而不是为了制作动画。我会让SVG玩笔划偏移。@Giumaganni哦，真的吗？：（我应该使用SVG。谢谢。这在CSS动画中是不可能的，立方体贝塞尔动画只是为了简化动画，不是为了动画。我将使用SVG播放笔划偏移。@giumaganni哦，真的吗？：（我应该使用SVG。谢谢。