Javascript 为什么动画不能按预期工作？

我请求你帮个小忙，我已经开始为我的朋友Micheal编写一个网站，只是遇到了一个小问题。 幻灯片菜单动画工作不正常，因为幻灯片（）（幻灯片是否用于幻灯片菜单）第一次工作顺利，但返回（）动画工作不顺利（它完成工作但不顺利：（）然后幻灯片在第二次做同样的事情：完成工作，但不顺利。。。。。。 代码如下（请记住，动画是在CSS文件中定义的）

var hero=document.querySelector（“.hero”），
边栏=document.querySelector（“.sidebar”）；
document.querySelector（“菜单图标”）.addEventListener（“单击”，函数幻灯片）（）{
hero.style.animation=“slidehero 2s轻松前进”；
sidebar.style.animation=“slidebar 2s轻松前进”；
});
document.querySelector（“#Capa_1”）.addEventListener（“单击”，函数returnBack（））{
hero.style.animation=“slidehero 2s轻松前进后退”；
sidebar.style.animation=“slidebar 2s ease forwards reverse”；
})；

/*拉丁语*/
@字体{
字体系列：“蒙特塞拉特”；
字体风格：普通；
字号：900；
src:local（“蒙特塞拉特黑”），local（“蒙特塞拉特黑”），url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_epG3gnD_g.woff2)格式（“woff2”）；
unicode范围：U+0000-00FF、U+0131、U+0152-0153、U+02BB-02BC、U+02C6、U+02DA、U+02DC、U+2000-206F、U+2074、U+20AC、U+2122、U+2191、U+2193、U+2212、U+2215、U+FEFF、U+FFFD；}
/*拉丁语*/
@字体{
字体系列：“蒙特塞拉特”；
字体风格：普通；
字号：700；
src:local（“蒙特塞拉特黑体”）、local（“蒙特塞拉特黑体”）、url(https://fonts.gstatic.com/s/montserrat/v12/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2)格式（“woff2”）；
unicode范围：U+0000-00FF、U+0131、U+0152-0153、U+02BB-02BC、U+02C6、U+02DA、U+02DC、U+2000-206F、U+2074、U+20AC、U+2122、U+2191、U+2193、U+2212、U+2215、U+FEFF、U+FFFD；}
.集装箱{
背景色：#272223；
宽度：100%；
显示器：flex；
溢出：隐藏；}
.超级头{
字体系列：蒙特塞拉特；
字体大小：900；}
.侧背{
背景色：#a6001c；}
@关键帧滑块{
0% {
左：0%；}
50% {
左：-25%；}
100% {
左：-50%；}
@关键帧幻灯片{
0% {
左：0%；}
50% {
左：-50%；}
100% {
左：-100%；}
身体{
宽度：200%；
溢出：隐藏；}
.英雄{
宽度：100vw；
高度：100vh；
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
位置：相对；}
.英雄，对准头部{
宽度：50%；
身高：100%；
显示器：flex；
对齐项目：居中；
对齐内容：中心；}
.英雄.头部对齐.侧面向后{
宽度：90%；
身高：90%；
位置：相对；}
.超级头{
颜色：白色；
字体大小：150px；
保证金：0；
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
文本转换：大写；
z指数：2；
显示：内联块；}
.菜单图标{
显示器：flex；
弯曲方向：立柱；
位置：绝对位置；
排名：0；
右：0；
右边距：6.21%；
利润率最高：11.29%；}
[class^=“rec-”]{
显示：块；
背景色：白色；
宽度：53px；
高度：8px；
边距：3px；}
.菜单项{
字体系列：蒙特塞拉特；
字号：700；
颜色：白色；
字母间距：0.5em；
文本转换：大写；
字体大小：14px；
光标：指针；
显示：块；
转换：文本装饰3s；}
.菜单项：悬停{
文本装饰：行通过；}
.侧边栏{
宽度：50%；
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
伸缩方向：列；}
.返回{
自对准：居中；
宽度：50px；
高度：50px；
边缘底部：50px；
游标：指针；}
#Capa_1{
变换：旋转（180度）；
利润底部：10%；
游标：指针；}
.箭头：悬停{
填充：#a6001c；}

关于我
技能
作品
联系我

我建议您也为“返回”活动添加动画。类似于：

document.querySelector(".menu-icon").addEventListener("click", function slide() {
    hero.style.left = "-50%";
    sidebar.style.left = "-100%";
});

@关键帧滑回{
0% {
左：-50%；}
50% {
左：-25%；}
100% {
左：0%；}
}
@关键帧滑回{
0% {
左：-100%；}
50% {
左：-50%；}
100% {
左：0%；}
}

document.querySelector（“.menu图标”）.addEventListener（“单击”，函数幻灯片（）{
hero.style.animation=“slidehero 2s轻松前进”；
sidebar.style.animation=“slidebar 2s轻松前进”；
});
document.querySelector（“#Capa_1”）.addEventListener（“单击”，函数returnBack（））{
hero.style.animation=“slideheroback 2s ease forwards”；
sidebar.style.animation=“slideback 2s ease forwards”；
});

简要浏览一下您的代码，我没有发现任何错误，但您的问题可能有很多原因

如果不知道您测试过的浏览器和系统规格，很难准确地找出问题所在。但是，如果让我猜一猜，我认为可能有两件事在起作用

首先，有时浏览器需要一些帮助来处理css动画。流行的UI库（如）使用一个名为“”的css属性。该属性基本上告诉浏览器，该属性很快就会发生更改，并让浏览器有时间进行准备

第二，一些浏览器仍然难以正确使用新功能。有关这方面的更多详细信息，请查看我给出的答案

如果使用“willchange:transition”属性不能解决您的问题，那么接下来我将尝试从css代码中删除关键帧，并使用animate属性

基本上看起来是这样的：

document.querySelector(".menu-icon").addEventListener("click", function slide() {
    hero.style.left = "-50%";
    sidebar.style.left = "-100%";
});

Css:

然后，您的javascript将如下所示：

document.querySelector(".menu-icon").addEventListener("click", function slide() {
    hero.style.left = "-50%";
    sidebar.style.left = "-100%";
});

---

我希望这能帮助您解决问题！

我会给您一个问题的答案，但只是一个建议，试着发布只与您所问内容相关的代码。您的大多数问题