设置圆动画以在线移动css

我试图设置一个点在一条线上移动的动画，当它到达线的末端时，它消失了，360符号出现了。 到目前为止，我设法使线条和“360”看起来完美，但圆点没有出现

.path{
笔划阵列：1000；
行程偏移量：1000；
动画：向前冲5秒；
}
.耽搁{
不透明度：0；
动画：隐藏3秒轻松进退1秒向前；
动画延迟：4s；
}
.马克{
运动路径：路径（'M236.52,53.48A130.73130.73,0,1,1209,26.21'）；
偏移路径：路径（'M236.52,53.48A130.73130.73,0,1,1209,26.21'）；
动画：向前移动5s；
}
@关键帧移动{
100% {
运动补偿：100%；
偏移距离：100%；
}
}
@关键帧破折号{
到{
笔划偏移：0；
}
}
@关键帧隐藏{
0% {
不透明度：0；
}
10% {
不透明度：0；
}
15% {
不透明度：1；
}
100% {
不透明度：1；
}
}

.cls-1{fill:none；stroke:#5c；stroke mit:10；stroke width:2px；}.cls-2{fill:#00aeef；}360