Javascript eventListeners的动画处理问题

我有这个问题，尽管出于某种原因，它在下面的代码片段中似乎运行良好

我希望在单击“开始”时执行与“退出”相同的动画，但实际情况是：

如果鼠标在其上，则它将完成一半动画，然后停止

如果鼠标单击后离开，它将停止

我在Chrome中运行了代码，并尝试了Mozilla，得到了相同的结果。我真的很惊讶为什么它在片段中工作得很好。我尝试过很多方法，比如删除监听器、简化动画等等，但都没有效果

函数TogleAnimationStart（）{
document.getElementById（'Start'）.style.animation=“当超过0.4s无限时，照明0s无限时，菜单移动0s无限时”
}
函数TogleAnimationOptions（）{
document.getElementById（'Options'）.style.animation=“当超过0.4s无限时，照明0s无限时，菜单移动0s无限时”
}
函数TogleAnimationExit（）{
document.getElementById（'Exit'）.style.animation=“当超过0.4s无限时，照明0s无限，菜单移动0s无限”
}
功能切换菜单（id）{
document.getElementById（id）.style.animation=“照明4s线性无限，菜单移动2.5s无限”
}
函数简介（）{
document.getElementById（'Start'）.style.animation=“照明4s线性无限，菜单移动2.5s无限”
document.getElementById（'Options'）.style.animation=“照明5s线性无限，菜单移动2.5s无限”
document.getElementById（'Exit'）.style.animation=“照明4s线性无限，菜单移动2.5s无限”
document.getElementById（'Start'）。addEventListener（“单击”，开始名称）
document.getElementById（'Start'）。addEventListener（“鼠标悬停”，TogleNimationStart）
document.getElementById（'Options'）。addEventListener（“鼠标悬停”，TogleNimationOptions）
document.getElementById（'Exit'）。addEventListener（“鼠标悬停”，TogleNimationExit）
document.getElementById（'Start'）.addEventListener（“mouseout”，function（）{TogleIdleMenu（'Start'）}）
document.getElementById（'Options'）.addEventListener（“mouseout”，function（）{TogleIdleMenu（'Options'）}）
document.getElementById（'Exit'）.addEventListener（“mouseout”，function（）{TogleIdleMenu（'Exit'）}）
}
函数startName（）{
document.getElementById（'Start'）.style.animation=“Bye 1s 0.2s 1”
document.getElementById（'Options'）.style.animation=“ByeOptions 1s 0.2s 1”
document.getElementById（'Exit'）.style.animation=“Bye 1s 0.2s 1”
}
addEventListener（'load'，function（））{
document.getElementById（“GameFrame”）.addEventListener（“单击”，介绍，{once:true}）
})

正文{
溢出：隐藏；
显示器：flex；
证明内容：中心；
背景#031321；
}
#开始、#选项、#退出{
背景色：黑色；
文本对齐：居中；
颜色：#ffd70080；
字母间距：3px；
字体大小：40px；
显示：块；
利润率：20px；
高度：50px；
宽度：300px；
边框：4px双#8B008B；
边界半径：50px；
位置：相对位置；
左：250px；
顶部：350px；
}
#游戏框架{
背景：黑色；
最大宽度：100%；
高度：650px；
宽度：850px；
位置：相对位置；
}
@关键帧{
0%{
光标：指针；
字体大小：43px；
文本阴影：0px 0px 7px#ffd700，0 0 60px#ffd700，0 0 160px#ffd700；
颜色：#ffd700；
滤光片：亮度（85%）；
背景#8B008B；
盒影：300px#8B008B、600px#8B008B、160px#8B008B；
}
25%{
顶部：354px；
光标：指针；
字体大小：43px；
文本阴影：0px 0px 7px#ffd700，0 0 60px#ffd700，0 0 160px#ffd700；
颜色：#ffd700；
滤光片：亮度（85%）；
背景#8B008B；
盒影：300px#8B008B、600px#8B008B、160px#8B008B；
}
50%{
顶部：358px；
光标：指针；
字体大小：43px；
文本阴影：0px 0px 7px#ffd700，0 0 60px#ffd700，0 0 160px#ffd700；
颜色：#ffd700；
滤光片：亮度（85%）；
背景#8B008B；
盒影：300px#8B008B、600px#8B008B、160px#8B008B；
}
75%{
顶部：354px；
光标：指针；
字体大小：43px；
文本阴影：0px 0px 7px#ffd700，0 0 60px#ffd700，0 0 160px#ffd700；
颜色：#ffd700；
滤光片：亮度（85%）；
背景#8B008B；
盒影：300px#8B008B、600px#8B008B、160px#8B008B；
}
100%{
顶部：350px；
光标：指针；
字体大小：43px；
文本阴影：0px 0px 7px#ffd700，0 0 60px#ffd700，0 0 160px#ffd700；
颜色：#ffd700；
滤光片：亮度（85%）；
背景#8B008B；
盒影：300px#8B008B、600px#8B008B、160px#8B008B；
}
}
@关键帧照明{
0%{文本阴影：0px 0px 7px#ffd70080，0 0 18px#ffd70080，0 0 46px#ffd70080；框阴影：0 0 0 21px#8B008B；}
10%{顶部：349px；文本阴影：0px 0px 8px#ffd70080，0 0 19px#ffd70080，0 0 0 45px#ffd70080；方框阴影：0 0 20px#8B008B；}
20%{顶部：351px；文本阴影：0px 0px 9px#ffd70080，0 0 20px#ffd70080，0 0 0 43px#ffd70080；方框阴影：0 0 19px#8B008B；}
30%{顶部：349px；文本阴影：0px 0px 10px#ffd70080，0 0 21px#ffd70080，0 0 42 px#ffd70080；框阴影：0 0 18 px#8B008B；}
40%{顶部：351px；文本阴影：0px 0px 11px#ffd70080，0 0 22px#ffd70080，0 0 41px#ffd70080；框阴影：0 0 17px#8B008B；}
50%{顶部：349px；文本阴影：0px 0px 12px#ffd70080，0 0 23px#ffd70080，0 0 40px#ffd70080；方框阴影：0 0 16px#8B008B；}
60%{顶部：351px；文本阴影：0px 0px 11px#ffd70080，0 0 22px#ffd70080，0 0 0 41px#ffd70080；框阴影：0 0 15px#8B008B；}
70%{顶部：349px；文本阴影：0px 0px 9px#ffd70080，0 0 21px#ffd70080，0 0 42px#ffd70080；框阴影：0 0 16px#8B008B；}
80%{顶部：351px；文本阴影：0px 0px 8px#ffd70080，0 0 20px#ffd70080，0 0 0 43px#ffd70080；框阴影：