用Javascript控制CSS关键帧

我想用JS/Jquery而不是CSS悬停动作来控制以下动画。可能吗

。按钮{
宽度：350px；
高度：300px；
保证金：100像素自动；
位置：相对位置；
边框：实心2px#cbd4d9；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
.button:hover.hoverBtn:before，.button:hover.hoverBtn:after{
不透明度：1；
-webkit动画：打开0.8s；
/*铬、狩猎、歌剧*/
动画：打开0.8秒；
动画填充模式：正向；
动画计时功能：立方贝塞尔（0.39,0.575,0.565,1）；
动画方向：正常；
}
.button:悬停.hoverBtn底部：之前，.button:悬停.hoverBtn底部：之后{
不透明度：1；
-webkit动画：openb0.8s；
/*铬、狩猎、歌剧*/
动画：openb0.8s；
动画延迟：0.8s；
动画填充模式：正向；
动画计时功能：立方贝塞尔（0.39,0.575,0.565,1）；
动画方向：正常；
}
.hoverBtn{
宽度：100%；
高度：300px；
位置：绝对位置；
顶部：-1px；
}
.BTN:之前{
位置：绝对位置；
内容：''；
身高：0；
宽度：0；
显示：块；
不透明度：0；
边框顶部：实心2px#517180；
左边框：实心2px#517180；
-webkit边框左上半径：5px；
-moz边框左上半径：5px；
边框左上半径：5px；
-webkit边框左下半径：5px；
-moz边框左下半径：5px；
边框左下半径：5px；
右：175px；
}
.BTN:之后{
位置：绝对位置；
内容：''；
身高：0；
宽度：0；
显示：块；
不透明度：0；
边框顶部：实心2px#517180；
右边框：实心2px#517180；
-webkit边框右上角半径：5px；
-moz边框右上角半径：5px；
边框右上角半径：5px；
-webkit边框右下半径：5px；
-moz边框右下半径：5px；
边框右下半径：5px；
左：175px；
}
.hoverBtn底部{
宽度：100%；
高度：300px；
位置：绝对位置；
}
.hoverBtn底部：之前{
位置：绝对位置；
内容：''；
身高：0；
宽度：0；
显示：块；
不透明度：0；
高度：300px；
边框底部：实心2px#517180；
-webkit边框右上角半径：5px；
-moz边框右上角半径：5px；
边框右上角半径：5px；
-webkit边框右下半径：5px；
-moz边框右下半径：5px；
边框右下半径：5px；
右：0；
}
.hoverBtn底部：之后{
位置：绝对位置；
内容：''；
身高：0；
宽度：0；
显示：块；
不透明度：0；
高度：300px；
边框底部：实心2px#517180；
-webkit边框左上半径：5px；
-moz边框左上半径：5px；
边框左上半径：5px；
-webkit边框左下半径：5px；
-moz边框左下半径：5px；
边框左下半径：5px；
左：0；
}
@关键帧打开{
0% {
宽度：0；
身高：0；
}
50% {
宽度：175px；
身高：0；
}
100% {
宽度：175px；
高度：300px；
}
}
@关键帧openB{
0% {
宽度：0px；
}
100% {
宽度：175px；
}
}

方形边框动画
点击这里
$（“#目标”）。单击（函数（）{
警报（“调用了.click（）的处理程序”）；
});

在开始之前，我用vanila js写了这篇文章，因为我头脑中对jquery不太熟悉，如果你真的想，我可以搜索jquery语法，但现在至少掌握了这个概念

你必须做的基本事情是以下结构

var button = document.querySelector('#myButton');
if(button.classList.contains('animBorder')){
    button.classList.remove('animBorder');
}else{ 
    button.classList.add('animBorder');
}

您将需要更改类（在我的示例中名为“.animBorder”）的：hover，然后检查onclick该类是否处于活动状态，并相应地添加/删除该类

让我知道如果你需要更多的解释，我会编辑

下面是一个运行示例：

函数$（str）{returndocument.querySelector（str）；}
_$（“#目标”）.addEventListener（'click'，doClick）；
函数doClick（e）{
var bcl=$（'#myButton'）。类列表
bcl[bcl.contains（'animBorder'）？'remove'：'add']（'animBorder'）；
}

。按钮{
宽度：350px；
高度：300px；
保证金：100像素自动；
位置：相对位置；
边框：实心2px#cbd4d9；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}
.button.animBorder.hoverBtn:之前，
.button.animBorder.hoverBtn:之后{
不透明度：1；
-webkit动画：打开0.8s；
/*铬、狩猎、歌剧*/
动画：打开0.8秒；
动画填充模式：正向；
动画计时功能：立方贝塞尔（0.39,0.575,0.565,1）；
动画方向：正常；
}
.button.animBorder.hoverBtn底部：之前，
.button.animBorder.hoverBtn底部：之后{
不透明度：1；
-webkit动画：openb0.8s；
/*铬、狩猎、歌剧*/
动画：openb0.8s；
动画延迟：0.8s；
动画填充模式：正向；
动画计时功能：立方贝塞尔（0.39,0.575,0.565,1）；
动画方向：正常；
}
.hoverBtn{
宽度：100%；
高度：300px；
位置：绝对位置；
顶部：-1px；
}
.BTN:之前{
位置：绝对位置；
内容：''；
身高：0；
宽度：0；
显示：块；
不透明度：0；
边框顶部：实心2px#517180；
左边框：实心2px#517180；
-webkit边框左上半径：5px；
-moz边框左上半径：5px；
边框左上半径：5px；
-webkit边框左下半径：5px；
-moz边框左下半径：5px；
边框左下半径：5px；
右：175px；
}
.BTN:之后{
位置：绝对位置；
内容：''；
身高：0；
宽度：0；
显示：块；
不透明度：0；
边框顶部：实心2px#517180；
右边框：实心2px#517180；
-webkit边框右上角半径：5px；
-moz边框右上角半径：5px；
边框右上角半径：5px；
-webkit边框右下半径：5px；
-moz边框右下半径：5px；
边框右下半径：5px；
左：175px；
}
.hoverBtn底部{
宽度：100%；
高度：300px；
位置：绝对位置；
}
.hoverBtn底部：之前{
位置：绝对位置；
内容：''；
身高：0；
宽度：0；
显示：块；
不透明度：0；
高度：300px；