Jquery css在悬停时运行关键帧并单击

我一直在尝试让这个“按钮”（实际上是一个“div”）在悬停和“单击”的关键帧中运行。目前它在悬停上工作得很好，但我很难弄清楚如何让ripple在“点击”/“激活”以及悬停上工作。我已经尝试了一些CSS和Jquery修复程序，但是我所尝试的似乎都不允许动画在悬停和单击上运行

如何在单击按钮时运行关键帧

$（'.hvr ripple out good'）。单击（函数（）{
$（this.toggleClass（'fill-good'）；
});
.hvr波纹输出良好{
保证金：5px；
宽度：20px；
高度：20px；
填充：10px；
颜色：#ddd；
文本对齐：居中；
边框：1px实心#ddd；
边界半径：50%；
}
.hvr波纹输出良好：悬停{
颜色：#39CCCC；
边框颜色：#39CCCC；
}
/*涟漪*/
@-webkit关键帧hvr波纹输出{
100% {
顶部：-12px；
右：-12px；
底部：-12px；
左-12px；
不透明度：0；
}
}
@关键帧hvr波纹输出{
100% {
顶部：-12px；
右：-12px；
底部：-12px；
左-12px；
不透明度：0；
}
}
.hvr波纹良好{
显示：内联块；
垂直对齐：中间对齐；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-moz osx字体平滑：灰度；
位置：相对位置；
}
.hvr波纹输出良好：之前{
内容：''；
位置：绝对位置；
边框：rgba（0,0,0,0.0）实心2px；
边界半径：50%；
排名：0；
右：0；
底部：0；
左：0；
-webkit动画持续时间：1s；
动画持续时间：1s；
}
.hvr涟漪输出良好：悬停：之前，
.hvr涟漪输出良好：焦点：之前，
.hvr波纹输出良好：激活：之前{
-webkit动画名称：hvr ripple out；
动画名称：hvr ripple out；
边框颜色：#39CCCC；
动画填充模式：正向；
}
.hvr波纹输出良好：激活{
背景色：#61D6D6；
-webkit动画名称：hvr ripple out；
动画名称：hvr ripple out；
}
.填好{
背景色：#39CCCC；
颜色：#fff；
边框：1px实心#fff；
}
.填充好：悬停{
颜色：#fff；
边框：1px实心#fff；
}

根据本文：

重新启动CSS动画的理想方法是克隆并替换元素。请尝试使用以下代码：

$('.hvr-ripple-out-good').click(function() {
     var el = $(this),  
     newone = el.clone(true);
     el.before(newone);
     el.remove();     
     newone.addClass('fill-good'); //This line is added just for styling
});

这是小提琴：
好的，这就是如何重做动画

$('.hvr-ripple-out-good').click(function() {
     var el = $(this),  
     newone = el.clone(true);
     el.before(newone);
     $("." + el.attr("class") + ":last").remove();     
});

并添加
$（this.toggleClass（'fill-good'）到最后，所以

$('.hvr-ripple-out-good').click(function() {
     var el = $(this),  
     newone = el.clone(true);
     el.before(newone);
     $("." + el.attr("class") + ":last").remove(); 
     $(this).toggleClass('fill-good');
});

片段：


$（'.hvr ripple out good'）。单击（函数（）{
var el=$（此），
newone=el.clone（真）；
el.before（新一）；
$（“+el.attr（“class”）+“：last”）.remove（）；
$（this.toggleClass（'fill-good'）；
});
.hvr波纹输出良好{
保证金：5px；
宽度：20px；
高度：20px；
填充：10px；
颜色：#ddd；
文本对齐：居中；
边框：1px实心#ddd；
边界半径：50%；
}
.hvr波纹输出良好：悬停{
颜色：#39CCCC；
边框颜色：#39CCCC；
}
/*涟漪*/
@-webkit关键帧hvr波纹输出{
100% {
顶部：-12px；
右：-12px；
底部：-12px；
左-12px；
不透明度：0；
}
}
@关键帧hvr波纹输出{
100% {
顶部：-12px；
右：-12px；
底部：-12px；
左-12px；
不透明度：0；
}
}
.hvr波纹良好{
显示：内联块；
垂直对齐：中间对齐；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-moz osx字体平滑：灰度；
位置：相对位置；
}
.hvr波纹输出良好：之前{
内容：''；
位置：绝对位置；
边框：rgba（0,0,0,0.0）实心2px；
边界半径：50%；
排名：0；
右：0；
底部：0；
左：0；
-webkit动画持续时间：1s；
动画持续时间：1s；
}
.hvr涟漪输出良好：悬停：之前，
.hvr涟漪输出良好：焦点：之前，
.hvr波纹输出良好：激活：之前{
-webkit动画名称：hvr ripple out；
动画名称：hvr ripple out；
边框颜色：#39CCCC；
动画填充模式：正向；
}
.hvr波纹输出良好：激活{
背景色：#61D6D6；
-webkit动画名称：hvr ripple out；
动画名称：hvr ripple out；
}
.填好{
背景色：#39CCCC；
颜色：#fff；
边框：1px实心#fff；
}
.填充好：悬停{
颜色：#fff；
边框：1px实心#fff；
}
重新启动动画的另一种方法是使用
setTimeout（）
，如下所示

请注意，我将动画分为一个类
。animate


$（'.hvr ripple out good'）。单击（函数（）{
var$this=$（this）；
$this.toggleClass（'fill-good'）；
$this.removeClass（'animate'）；
setTimeout（函数（）{
$this.addClass（'animate'）
})
});
.hvr波纹输出良好{
保证金：5px；
宽度：20px；
高度：20px；
填充：10px；
颜色：#ddd；
文本对齐：居中；
边框：1px实心#ddd；
边界半径：50%；
}
.hvr波纹输出良好：悬停{
颜色：#39CCCC；
边框颜色：#39CCCC；
}
/*涟漪*/
@-webkit关键帧hvr波纹输出{
100% {
顶部：-12px；
右：-12px；
底部：-12px；
左-12px；
不透明度：0；
}
}
@关键帧hvr波纹输出{
100% {
顶部：-12px；
右：-12px；
底部：-12px；
左-12px；
不透明度：0；
}
}
.hvr波纹良好{
显示：内联块；
垂直对齐：中间对齐；
-webkit背面可见性：隐藏；
背面可见性：隐藏；
-moz osx字体平滑：灰度；
位置：相对位置；
}
.hvr波纹输出良好：之前{
内容：''；
位置：绝对位置；
边框：rgba（0,0,0,0.0）实心2px；
边界半径：50%；
排名：0；
右：0；
底部：0；
左：0；
-webkit动画持续时间：1s；
动画持续时间：1s；
}
.动画：悬停：在，
.动画：焦点：之前，
.设置动画：活动：之前{
-webkit动画名称：hvr ripple out；
动画名称：hvr ripple out；
边框颜色：#39CCCC；
动画填充模式：正向；
}
.设置动画：活动{
背景色：#61D6D6；
-webkit动画名称：hvr ripple out；
动画名称：hvr ripple out；
}
.填好{
背景色：#39CCCC；
颜色：#fff；
边框：1px