Javascript 涟漪动画

当我按住鼠标按钮（

mousedown

）时，我会尝试这样做，这样刻度就不会消失。但是我所尝试的一切。。。那你能帮我吗

这是我的密码：

var计数=0；
$（“.rippleAnimation”）.mousedown（函数（e）{
var时间=新日期；
md_time=time.getTime（）；
//设置
var posX=$（this）.offset（）.left，
posY=$（this）.offset（）.top，
buttonWidth=$（this）.width（），
buttonHeight=$（此）.height（）；
//添加元素
$（此）。追加（“”）；
//绕过去！
如果（按钮宽度>=按钮宽度）{
按钮宽度=按钮宽度；
}否则{
按钮宽度=按钮宽度；
}
//获取元素的中心
var x=e.pageX-posX-按钮宽度/2；
变量y=e.pageY-posY-buttonHeight/2；
/*var x=0；
var y=0*/
//添加涟漪CSS并启动动画
$（“#涟漪”+计数）.css({
宽度：按钮宽度，
身高：钮扣高度，
顶部：y+‘px’，
左：x+‘px’
}).addClass（“涟漪效应”）；
//把旧的拿走
//移除（计数、默认动画时间）；
计数++；
})；

.top{
宽度：50px；
高度：50px；
背景色：#FF9800；
边界半径：50%；
}
.涟漪{
宽度：0；
身高：0；
边界半径：50%；
背景：rgba（255，255，255，0.4）；
-webkit变换：缩放（0）；
-ms变换：尺度（0）；
变换：比例（0）；
位置：绝对位置；
不透明度：1；
}
.涟漪效应{
-webkit动画：rippleDrop.6s线性；
动画：rippleDrop.6s线性；
}
@-webkit关键帧rippleDrop{
100% {
-webkit转换：规模（2）；
变换：尺度（2）；
不透明度：1；
}
}
@关键帧rippleDrop{
100% {
-webkit转换：规模（2）；
变换：尺度（2）；
不透明度：1；
}
}

通过使用

动画填充模式：forwards

属性（），动画将在最后一个关键帧处结束。这将有助于实现所需的效果。

我尝试在按住鼠标按钮时，动画将保持缩放（2），但现在当你按住鼠标按钮时，动画持续时间是0.6s，因此在0.6s后缩放（0）@Dolis将

线性
更改为
向前
。这将为你指明正确的方向。我想：）回答我的问题。如果您愿意，我会将其标记为正确：）向前添加到动画