Javascript 如何使用JS键控功能切换类并激活/停用动画？

我现在已经用纯HTML和CSS编写了我的所有代码，但是我现在希望更改CSS，从使用：hover转换元素，改为使用javascript“keydown”函数，因此当按下键时，动画开始并保持打开状态，直到键被抬起，然后，动画有一个3秒计时器，并恢复到其原始位置

我真的很纠结于是否应该将整个动画转换为JS，还是删除“：hover”并切换类

.tempbg{
背景：线性梯度（#e66465，#9198e5）；
背景重复：无重复；
背景尺寸：1920像素1080像素；
}
masscont先生{
背景色：rgba（0,0,0,0）；
位置：粘性；
顶部：50px；
左：1725px；
宽度：260px；
高度：85px；
z指数：1；
}
.集装箱{
背景色：rgba（0,0,0,237）；
位置：绝对位置；
顶部：45px；
左：-95px；
宽度：20px；
高度：85px；
边界半径：50px；
边框左下半径：0%；
边框左上半径：0%；
z指数：1；
不透明度：1；
显示：块；
过渡：宽度2.2s三次贝塞尔（0.24,0.26,0.63,0.93）；
}
.容器：悬停{
宽度：260px；
}
#声音{
位置：绝对位置；
左：200px；
底部：-00px；
宽度：107.5px；
高度：10px；
填充：0；
浮动：左；
}
.fa话筒{
位置：绝对位置；
z指数：3；
左：69px；
底部：25px；
颜色：#525151；
字号：38px；
}
.fa话筒BG{
位置：绝对位置；
顶部：0px；
左：-60px；
宽度：121px；
高度：85px；
背景图像：
径向梯度（0%50%的圆，rgba（0,0,0,0）50px，#fff 51px）；
边框右上角半径：40px；
边框右下半径：40px；
z指数：2；
过渡：左1.7秒缓进缓出；
}
.masscont:hover#fa话筒bg{
左：140像素；
}
#boxVoice{
背景：rgb（180,180,180）；
位置：绝对位置；
z指数：4；
高度：27px；
宽度：14.2px；
左：6.2px；
底部：11px；
边界半径：30px；
}

---

只需为添加当前

类的
按键
和
按键
添加事件监听器：悬停
类并删除它们。但是修改这些类，使其不再触发
：hover


//获取两个已转换元素的引用
让masscont=document.getElementById（“masscont”）；
let container=document.getElementById（“容器”）；
//在转换开始的位置设置按键事件侦听器
document.addEventListener（“按键”，函数（）{
//向每个元素添加适当的类
container.classList.add（“containerMove”）；
masscont.classList.add（“masscontMove”）；
});
//在转换结束的位置设置keyup事件侦听器
document.addEventListener（“keyup”，function（））{
//删除每个元素的相应类
container.classList.remove（“containerMove”）；
masscont.classList.remove（“masscontMove”）；
});
.tempbg{
背景：线性梯度（#e66465，#9198e5）；
背景重复：无重复；
背景尺寸：1920像素1080像素；
}
masscont先生{
背景色：rgba（0,0,0,0）；
位置：粘性；
顶部：50px；
左：1725px；
宽度：260px；
高度：85px；
z指数：1；
}
/*将该类更改为不使用：hover伪类*/
.masscontMove#fa话筒BG{
左：140像素；
}
.集装箱{
背景色：rgba（0,0,0,237）；
位置：绝对位置；
顶部：45px；
左：-95px；
宽度：20px；
高度：85px；
边界半径：50px；
边框左下半径：0%；
边框左上半径：0%；
z指数：1；
不透明度：1；
显示：块；
过渡：宽度2.2s三次贝塞尔（0.24,0.26,0.63,0.93）；
}
/*将该类更改为不使用：hover伪类*/
.集装箱移动{
宽度：260px；
}
#声音{
位置：绝对位置；
左：200px；
底部：-00px；
宽度：107.5px；
高度：10px；
填充：0；
浮动：左；
}
.fa话筒{
位置：绝对位置；
z指数：3；
左：69px；
底部：25px；
颜色：#525151；
字号：38px；
}
.fa话筒BG{
位置：绝对位置；
顶部：0px；
左：-60px；
宽度：121px；
高度：85px；
背景图像：
径向梯度（0%50%的圆，rgba（0,0,0,0）50px，#fff 51px）；
边框右上角半径：40px；
边框右下半径：40px；
z指数：2；
过渡：左1.7秒缓进缓出；
}
#boxVoice{
背景：rgb（180,180,180）；
位置：绝对位置；
z指数：4；
高度：27px；
宽度：14.2px；
左：6.2px；
底部：11px；
边界半径：30px；
}
既然您在使用jQuery，我应该负责绑定事件和添加\删除类

$('body').on('keydown', function() {
     $("element").addClass("class");
});

$('body').on('keyup', function() {
     $("element").removeClass("class");
});

添加这样的等待函数并不是一个好主意，但如果您需要这样做，它将起作用：

function wait(ms){
   var start = new Date().getTime();
   var end = start;
   while(end < start + ms) {
     end = new Date().getTime();
  }
}

如果您不希望通过选择不同的元素来更改keyup\down绑定的范围，也可以更改其范围。
为什么您认为OP使用JQuery？问题没有用JQuery标记，也没有显示或请求JQuery代码。因为它确实在他的代码示例中？编辑：这是在我输入sorry时编辑的原始代码示例中，是的，我应该更具体一点。我首先粘贴了我的全部代码，这是一个游戏的mod的一部分（这是与UI相关的），我认为这部分使用jquery。我纯粹是在HTML CSS上工作，只是在为动画添加JS，所以在人们对我大发雷霆之前我缩短了我的代码：P。所以这绝对是完美的，谢谢你，如果我想为动画添加一个特定的键绑定，例如使用字母“k”，我该怎么做？我原以为就是这样，但我不确定：
document.addEventListener（“onkeydown”，函数（e）{if（e.which==75 | | e.keyCode==75）{container.classList.add
$('body').on('keydown', function() {
     $("element").addClass("class");
});

$('body').on('keyup', function() {
    wait(3000); 
    $("element").removeClass("class");
});