Javascript HTML/CSS图像旋转、多重旋转和轻松输出

我尝试了很多CSS代码片段，但都只做了我想要的部分

下面是我试图在函数myspinx{}中实现的内容

一,。单击“不可见地将图像旋转x度” 2.然后设置旋转800度可见的动画 3.慢慢停下来 4.清除所有必要的选项，以便下次单击按钮时再次工作

函数myspin{ var x=800； document.getElementByIdarrowid2.style.transform=rotate+x+deg； document.getElementByIdarrowid2.style.animation=arrowspin 2s ease out 1 normal； } 箭头2{ 位置：绝对位置； 顶部：100px； 左：100px； -webkit转换：-webkit转换2缓出； }

---

所有旋转都是在css中完成的，js仅在2500Manimation持续时间后添加/删除动画类。你为什么要800度？在这种情况下，它将跳转到现有位置，我制作了360*3，而不是现在，所以动画从开始处结束

$'img'。单击函数{ $this.addClass'animated'； var=这个； setTimeoutfunction{ $that.removeClass'animated'； }, 2500 }; img{ 宽度：400px； 高度：135px； } 动画{ 动画：旋转放松2.5s； } @关键帧旋转{ 0% { 不透明度：0； 变换：旋转20度； } 10%{ 不透明度：0； } 20% { 不透明度：1； } 100% { 变换：旋转1080度； } }

---

您尝试过上述任何一种方法的代码在哪里？我尝试过使用它并对其进行修改。stackoverflow抱怨我只有代码并拒绝它。800°仅为示例。重要的是360°旋转几次，旋转更生动一点。@hugo289“旋转更生动”是什么意思？额外持续时间？不完全是360°倍数的随机数。至少2*360+和一点。你知道吗-@hugo289所以把你的随机数改为1080度，我没有得到你的问题动画旋转800度意味着看到图像旋转而不是跳到800度