在单击时使用javascript加速CSS动画

我制作了一个非常简单的网页，它有一个居中的图像。当你点击它时，它开始旋转

现在，我正试图使用JavaScript来实现这一点，当您再次单击它时，它开始旋转得越来越快，我已经研究了多个类似的堆栈溢出问题，但我似乎无法实现这一点：

var img=document.querySelector（“#spin”）
img.addEventListener（'click'，onClick，false）；
var deg=360；
函数onClick（）{
deg+=90；
var stylesheet=document.styleSheets[0]；
var spinlule=stylesheet.cssRules[0]；
var spinRule_To=spinRule.cssRules[1]；
var spinRule_To_Style=spinRule_To.Style；
spinRule_To_Style.setProperty（“变换：旋转”，度）；
}

@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}
#tbl{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
边界：0；
}
#tbl td{
垂直对齐：中间对齐；
文本对齐：居中；
}
img：目标{
动画名称：旋转；
动画持续时间：4000ms；
动画迭代次数：无限；
动画计时功能：线性；
}

---

如果

jquery

允许id，请尝试此操作

在代码中，您使用

var deg

增加旋转度，但这不会提高速度，您需要通过每次单击来缩短动画的持续时间以加速动画

var持续时间=4000；
$（'#spinTrigger'）。单击（函数（）{
$（'#spin'）.css（“动画持续时间”，持续时间+毫秒”）；
持续时间-=200；
如果（持续时间==0）{
持续时间=100；
}
})

@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}
#tbl{
身高：100%；
宽度：100%；
保证金：0；
填充：0；
边界：0；
}
#tbl td{
垂直对齐：中间对齐；
文本对齐：居中；
}
img{
宽度：300px；
}
img：目标{
动画名称：旋转；
动画持续时间：4000ms；
动画迭代次数：无限；
动画计时功能：线性；
}

j Query很好，更改动画时间是我以前做的事情，但是图像开始到处跳跃+你不能超过1毫秒！我们的速度不能超过任何动画的最大限制

100ms

，对于跳跃式img，我们可以找出解决方法。跳跃图像背后的原因是img每100ms的旋转度，例如，如果动画持续时间为

4000

，则img将每秒旋转

90度

；如果动画持续时间为

100

，则img将每秒旋转

360度

。每次点击img，img都会更快地旋转或跳跃，以管理旋转和持续时间之间的平衡。我想是吧。