我当前已经用纯HTML和CSS编写了所有代码JavaScript"键盘"功能，因此，按下键时，动画开始并保持打开状态，直到钥匙抬起，然后动画具有3秒的计时器，然后恢复其原始位置。
我真的很坚持是否应该将整个动画转换为JS还是仅移除"：悬停"并切换类？
.tempbg {
background: linear-gradient(#e66465, #9198e5);
background-repeat: no-repeat;
background-size: 1920px 1080px;
}
.masscont {
background-color: rgba(0, 0, 0, 0);
position: sticky;
top: 50px;
left: 1725px;
width: 260px;
height: 85px;
z-index: 1;
}
.container {
background-color: rgba(0, 0, 0, .237);
position: absolute;
top: 45px;
left: -95px;
width: 20px;
height: 85px;
border-radius: 50px;
border-bottom-left-radius: 0%;
border-top-left-radius: 0%;
z-index: 1;
opacity: 1;
display: block;
transition: width 2.2s cubic-bezier(0.24, 0.26, 0.63, 0.93);
}
.container:hover {
width: 260px;
}
#voice {
position: absolute;
left: 200px;
bottom: -00px;
width: 107.5px;
height: 10px;
padding: 0;
float:left;
}
.fa-microphone {
position: absolute;
z-index: 3;
left: 69px;
bottom: 25px;
color: #525151;
font-size: 38px;
}
.fa-microphonebg {
position: absolute;
top: 0px;
left: -60px;
width: 121px;
height: 85px;
background-image:
radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 51px);
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
z-index: 2;
transition: left 1.7s ease-in-out;
}
.masscont:hover #fa-microphonebg {
left: 140px;
}
#boxVoice {
background: rgb(180, 180, 180);
position: absolute;
z-index: 4;
height: 27px;
width: 14.2px;
left: 6.2px;
bottom: 11px;
border-radius: 30px;
}<head>
<script src="https://kit.fontawesome.com/3f31cfc768.js"></script>
</head>
<body class="tempbg">
<div class="masscont" id="masscont">
<div class="container" id="container">
<div id="voice">
</div>
<div class="fa-microphonebg" id="fa-microphonebg">
<i class="fas fa-microphone"><span id="boxVoice"></span></i>
</div>
</div>
</div>
</body>只需添加 keypress和 keyup的事件侦听器，然后添加当前的:hover类并将其删除。但是将这些类修改为不再在:hover上触发。
// Get refreences to the two tranistioned elements
let masscont = document.getElementById("masscont");
let container = document.getElementById("container");
// Set up a keypress event listener where the transition starts
document.addEventListener("keypress", function(){
// Add the appropriate class to each element
container.classList.add("containerMove");
masscont.classList.add("masscontMove");
});
// Set up a keyup event listener where the transition ends
document.addEventListener("keyup", function(){
// Remove the appropriate class to each element
container.classList.remove("containerMove");
masscont.classList.remove("masscontMove");
});.tempbg {
background: linear-gradient(#e66465, #9198e5);
background-repeat: no-repeat;
background-size: 1920px 1080px;
}
.masscont {
background-color: rgba(0, 0, 0, 0);
position: sticky;
top: 50px;
left: 1725px;
width: 260px;
height: 85px;
z-index: 1;
}
/* Change this class to not use a :hover pseudo-class */
.masscontMove #fa-microphonebg {
left: 140px;
}
.container {
background-color: rgba(0, 0, 0, .237);
position: absolute;
top: 45px;
left: -95px;
width: 20px;
height: 85px;
border-radius: 50px;
border-bottom-left-radius: 0%;
border-top-left-radius: 0%;
z-index: 1;
opacity: 1;
display: block;
transition: width 2.2s cubic-bezier(0.24, 0.26, 0.63, 0.93);
}
/* Change this class to not use a :hover pseudo-class */
.containerMove {
width: 260px;
}
#voice {
position: absolute;
left: 200px;
bottom: -00px;
width: 107.5px;
height: 10px;
padding: 0;
float:left;
}
.fa-microphone {
position: absolute;
z-index: 3;
left: 69px;
bottom: 25px;
color: #525151;
font-size: 38px;
}
.fa-microphonebg {
position: absolute;
top: 0px;
left: -60px;
width: 121px;
height: 85px;
background-image:
radial-gradient(circle at 0% 50%, rgba(0,0,0,0) 50px, #fff 51px);
border-top-right-radius: 40px;
border-bottom-right-radius: 40px;
z-index: 2;
transition: left 1.7s ease-in-out;
}
#boxVoice {
background: rgb(180, 180, 180);
position: absolute;
z-index: 4;
height: 27px;
width: 14.2px;
left: 6.2px;
bottom: 11px;
border-radius: 30px;
}<head>
<script src="https://kit.fontawesome.com/3f31cfc768.js"></script>
</head>
<body class="tempbg">
<div class="masscont" id="masscont">
<div class="container" id="container">
<div id="voice">
</div>
<div class="fa-microphonebg" id="fa-microphonebg">
<i class="fas fa-microphone"><span id="boxVoice"></span></i>
</div>
</div>
</div>
</body>由于您使用的是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();
}
}
所以将其放在一起
$('body').on('keydown', function() {
$("element").addClass("class");
});
$('body').on('keyup', function() {
wait(3000);
$("element").removeClass("class");
});
，如果您不希望它们通过选择其他元素，则可以更改Keyup down绑定的范围。