Javascript 曲线路径的Svg动画

我有一个SVG，想对它进行动画制作，我对SVG动画制作还不熟悉。所以我想让这个圆在弯曲的半椭圆形上移动，在5分钟内缓慢移动。有可能用CSS制作动画吗？ 到目前为止，我找到了这个简短的解释，但它并不完全是我想要的，或者我不理解如何实现我的代码。 下面是一个部分代码 编辑：我需要圆点精确地移动到曲线的顶部。

.container{
位置：相对位置；
利润率：15%；
宽度：300px；
高度：400px；
背景色：#212121；
盒影：0.29px 38px rgba（0,0,0,0.50），
0 25px 22px rgba（0,0,0,0.30），
插图0 0 15px 5px rgb（227228229）；
边界半径：15px；
边框：2倍实心；
边框颜色：#9E9E9E；
}
.时间容器{
保证金：0自动；
宽度：180px；
文本对齐：居中；
边界半径：50%；
盒子阴影：0px 130px 50px rgb（132,2,2），
0px 120px 70px rgb（99,1,1）；
}
.时间{
字体大小：3rem；
颜色：#D50000；
字母间距：3px；
}
.半椭圆形{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

5:00

使用

animationMotion

元素沿

路径移动
圆
。有关更多信息，请参阅这两个链接




.container{
位置：相对位置；
利润率：15%；
宽度：300px；
高度：400px；
背景色：#212121；
盒影：0 29px 38px rgba（0,0,0,0.50），0 25px 22px rgba（0,0,0,0.30），插入0 0 15px 5px rgb（227,228,229）；
边界半径：15px；
边框：2倍实心；
边框颜色：#9E9E9E；
}
.时间容器{
保证金：0自动；
宽度：180px；
文本对齐：居中；
边界半径：50%；
盒影：0px130px50pxrgb（132,2,2），0px120px70pxrgb（99,1,1）；
}
.时间{
字体大小：3rem；
颜色：#D50000；
字母间距：3px；
}
.半椭圆形{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}

5:00
在css
动画中有一种方法可以做到这一点，但是如果您使用javaScript
requestAnimationFrame
方法可能会重复为什么不使用svgs animate@灵魂之光：我将如何处理这个问题？@Adam我将如何在JS中处理这个问题？这太棒了！解决我的问题。我现在很好奇，如果我想在特定时间制作动画呢？我正在做一个计时器项目，我需要在计时器上每剩下5分钟就制作一个动画。我希望这是有道理的。假设我设定了25分钟，这不会有动画效果，除非达到5分钟。我可以使用JS或jQuery，像处理常规html元素一样处理它吗？@IlimkanOmurzakova更新了答案。您可以使用
jQuery
或
vanilla JS
进一步定制动画。太棒了！这真的很有帮助