Javascript SVG使用@keyframes在mouseout上反转动画不起作用

我有一组SVG图标，我正试图使用JavaScript将反向动画应用于这些图标

我有下面的代码，它分别添加了

on

或

off

on

mouseover

或

mouseout

事件。尽管未应用动画。我相信它正被CSS中的前两种样式所覆盖。有人能告诉我如何正确处理这个问题吗

var a=document.querySelectorAll（'a'）；
（e）上的函数{
var e=e.target.parentNode；
e、 classList.remove（'off'）
e、 classList.add（'on'）；
}
功能关闭（e）{
var e=e.target.parentNode；
e、 classList.remove（'on'）
e、 类列表。添加（'off'）；
}
a、 forEach（函数（el，u）{
el.addEventListener（“鼠标悬停”，打开）；
el.addEventListener（“鼠标出”，关闭）；
});
路径{
填充：#444142；
中风：无；
指针事件：全部；
}
圆圈{
填充：无；
冲程：#444142；
指针事件：全部；
笔画宽度：1；
}
.fb__图标。在路径上{动画：afbPO 0.15s向前移动；}
.fb__icon.on循环{动画：afbCO 0.15s前进时轻松；}
.t__图标。在路径上{动画：atPO 0.15s前进时轻松；}
.t__图标。在圆上{动画：atCO 0.15s前进时放松；}
.g__图标。在路径上{动画：agPO 0.15s向前移动；}
.g__图标。在圆上{动画：agCO 0.15s前进时放松；}
.yt__图标。在路径上{动画：aytPO 0.15s向前移动；}
.yt__icon.on圆圈{动画：aytCO 0.15秒前进速度；}
.off path{动画：向前移动0.5s缓动；}
.off圆圈{动画：向前移动0.5s；}
@关键帧afbPO{100%{fill:#3c589a；}}
@关键帧afbCO{100%{笔划：#3c589a；}}
@关键帧atPO{100%{fill:#68acd2；}}
@关键帧atCO{100%{stroke:#68acd2；}}
@关键帧agPO{100%{fill:#d54133；}}
@关键帧agCO{100%{stroke:#d54133；}}
@关键帧aytPO{100%{fill:#e72c2e；}}
@关键帧aytCO{100%{stroke:#e72c2e；}}
@关键帧Po{100%{fill:#444142；}
@关键帧Co{100%{stroke:#444142；}}
您可以使用简单的转换和CSS悬停来简化所有这些：


路径{
填充：#444142；
中风：无；
指针事件：全部；
过渡：0.5s；
}
圆圈{
填充：无；
冲程：#444142；
指针事件：全部；
笔画宽度：1；
过渡：0.5s；
}
.fb__图标：悬停路径{fill:#3c589a；}
.fb__图标：悬停圆{笔划：#3c589a；}
.t__图标：悬停路径{fill:#68acd2；}
.t__图标：悬停圆{stroke:#68acd2；}
.g__图标：悬停路径{fill:#d54133；}
.g__图标：悬停圆{stroke:#d54133；}
.yt__图标：悬停路径{fill:#e72c2e；}
.yt__图标：悬停圆{stroke:#e72c2e；}