Css 悬停时更改SVG动画

我有一个简单的SVG圆圈，它有一个默认的动画，悬停时动画会发生变化，但两者之间有一个僵硬的过渡。如果能帮上忙，我将不胜感激。‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎‎

这是小提琴：

svg{
宽度：250px；
溢出：可见；
}
.圆圈{
填充：无；
笔画：红色；
笔画宽度：10；
行程限制：10；
笔划线头：圆形；
变换框：填充框；
变换原点：中心；
动画：循环50秒线性无限向前；
}
@关键帧圆周运动{
0% {
变换：旋转（0）；
行程：400；
行程偏移：200；
}
100% {
变换：旋转（1800度）；
行程：400；
行程偏移：200；
}
}
svg:hover.circle{
动画：circleOneStrokeHover 2s线性无限向前；
}
@关键帧circleOneStrokeHover{
0% {
变换：旋转（0）；
动画计时功能：立方贝塞尔（0.55,0.055,0.675,0.19）；
行程：400；
行程偏移：200；
}
10% {
变换：旋转（0）；
动画计时功能：立方贝塞尔（0.55,0.055,0.675,0.19）；
行程：400；
行程偏移：200；
}
50% {
变换：旋转（900度）；
动画计时功能：立方贝塞尔（0.215,0.61,0.355,1）；
行程：500；
行程偏移：200；
}
100% {
行程：200；
行程偏移：300；
}
}

---

悬停时，仅更改

动画持续时间。尽管这确实意味着自定义悬停动画的选项更加有限


svg{
宽度：250px；
溢出：可见；
}
.圆圈{
填充：无；
笔画：红色；
笔画宽度：10；
行程限制：10；
笔划线头：圆形；
变换框：填充框；
变换原点：中心；
动画：循环50秒线性无限向前；
}
@关键帧圆周运动{
0% {
变换：旋转（0）；
行程：400；
行程偏移：200；
}
100% {
变换：旋转（1800度）；
行程：400；
行程偏移：200；
}
}
svg:hover.circle{
动画持续时间：2秒；
}