Javascript 按钮保持选中状态，JS中的.classList切换仅每隔一次运行一次

我正在努力完善一个练习，这是我正在学习的前端开发课程。该项目是一个随机颜色梯度背景生成器

我使用DOM操作来设置颜色，通过CSS类设置按钮的动画，等等

不过，我对如何修复3件事表示怀疑：

1-我的“随机化”按钮按下后保持选中状态，周围有一个可见的蓝色选择框。因此，在用户单击按钮外之前，它不会播放悬停动画

2-我的HTML颜色输入元素的样式在Firefox和CSS动画中不起作用。我不太熟悉修复兼容性，因此无法理解这一点：/

3-要设置两种颜色输入的动画，我将使用classList.toggle javascript方法切换动画CSS类。自然地，正如方法名称所示，它切换类，这意味着动画仅在用户单击“随机化”按钮时播放。我尝试了许多“重新切换”类的组合，但都没有成功

我非常感谢您对这些问题的任何意见，因为这对我的学习过程有很大帮助

非常感谢您迄今为止的阅读，并提前感谢您的帮助

代码如下（请原谅，它仍然不是很漂亮或经过重构：p）：

//变量
var css=document.querySelector（“h3”）；
var color1=document.querySelector（“.color1”）；
var color2=document.querySelector（“.color2”）；
var rndmBtn=document.getElementById（“随机化按钮”）；
var body=document.getElementById（“梯度”）；
//生成随机颜色
函数getRandomColor（）{
变量字母='0123456789ABCDEF'；
var color='#'；
对于（变量i=0；i<6；i++）{
颜色+=字母[Math.floor（Math.random（）*16）]；
}
返回颜色；
};
//在页面加载时设置初始渐变
函数setGradient（）{
body.style.background=“线性渐变（向右，“+color1.value+”，“+color2.value+”）；
css.textContent=body.style.background+“；”；
};
//选择两种随机颜色，将它们指定给变量，并将输入值和BG设置为新颜色
函数randomColor（）{
var rndmCol1=getRandomColor（）；
var rndmCol2=getRandomColor（）；
document.querySelector（“.color1”）.setAttribute（“value”，rndmCol1）；
document.querySelector（“.color2”）.setAttribute（“值”，rndmCol2）；
document.getElementById（“梯度”）.style.background=“线性梯度（向右，“+rndmCol1+”，“+rndmCol2+”）”；
css.textContent=body.style.background+“；”；
};
//按空格键的功能
函数pressSpace（）{
如果（event.keyCode===32）{
随机颜色（）；
动画按钮（）；
}
};
//动画按钮的功能
函数animateButton（）{
color1.classList.toggle（“动画”）；
color2.classList.toggle（“动画”）；
};
函数animateButton2（）{
color1.classList.toggle（“动画”）；
color2.classList.toggle（“动画”）；
};
//调用在页面加载时设置初始渐变的函数
setGradient（）；
//用于颜色拾取的事件侦听器
window.addEventListener（“加载”，随机颜色）；
rndmBtn.addEventListener（“单击”，动画按钮）；
color1.addEventListener（“输入”，设置梯度）；
color2.addEventListener（“输入”，设置梯度）；
rndmBtn.addEventListener（“单击”，随机颜色）；
window.addEventListener（“向下键”，按空格键）
正文{
字体：“Raleway”，无衬线；
颜色：rgba（0,0,0,0.5）；
文本对齐：居中；
文本转换：大写；
字母间距：.5em；
最高：15%；
背景：线性梯度（向右，#73ff01，#0beb）；
}
h1{
字体：600 3.5em“Raleway”，无衬线；
颜色：rgba（0,0,0,0.5）；
文本对齐：居中；
文本转换：大写；
字母间距：.5em；
宽度：100%；
}
h3{
字体：900 1em“Raleway”，无衬线；
颜色：rgba（0,0,0,0.5）；
文本对齐：居中；
文本转换：无；
字母间距：0.01em；
}
氢{
字体系列：“Raleway”，无衬线；
}
#随机按钮{
显示：块；
保证金：自动；
边缘顶部：30px；
字体系列：“Raleway”，无衬线；
字体大小：粗体；
字母间距：.3em；
填充：10px；
右侧填充：15px；
左侧填充：15px；
边框：1.5px实心；
边框颜色：rgba（0,0,0,0.5）；
背景色：rgba（0,0,0,0.01）；；
边界半径：20px；
光标：指针；
}
#随机化按钮：悬停{
背景色：rgba（0,0,0,0.2）；；
颜色：rgb（0,0,0）；
}
#随机按钮：活动{
背景色：rgba（0,0,0,0.4）；；
颜色：rgb（0,0,0）；
}
输入[类型=颜色]{
宽度：40px；
高度：40px；
边界：无；
边界半径：10px；
背景：无；
光标：指针；
}
输入[type=“color”]：-webkit色样包装器{
填充：0；
}
输入[type=“color”]：-webkit色样{
边界：无；
边界半径：10px；
}
.color1、.color2{
边界：无；
}
.colorInfo{
保证金：自动；
宽度：50%；
边缘顶部：50px；
边框：1.5px实心；
边框颜色：rgba（0,0,0,0.5）；
边界半径：10px；
}
/*输入框动画*/
.动画{
-webkit动画：动画1000ms线性二者；
动画：动画均为1000毫秒线性；
}
/*使用Bounce.js生成*/
@-webkit关键帧动画{
0%{-webkit转换：matrix3d（1,0,0,0,0,0,0,1,0,0,0,0,0,1）；转换：matrix3d（1,0,0,0,0,0,1,0,0,0,0,0,1）；}
3.6%{-webkit变换：矩阵3d（0.705,0.717,0,0，-0.551,0,0,0,0,0,1,0,0,0,0,1）；变换：矩阵3d（0.705,0.717,0,0，-0.551,0.841,0,0,0,0,0,1）；}
4.3%{-webkit转换：矩阵3d（0.606，0.804，0，0，-0.641，0.776，0，0，0，0，0，0，0，0，0，1）；转换：矩阵3d（0.606，0.804，0，0，-0.641，0，0，0，0，1）；}
7.21%{-webkit转换：matrix3d（0.208,0.987,0,，
function toggleBtn () { this.rndmBtn = !this.rndmBtn};