设置文本动画，向左旋转一次，暂停，然后向右旋转一次，并在Javascript中重复

目前，我已经有了这个代码，它可以用3d效果连续旋转文本。然而，我想做的是让文本做一个完整的旋转或360度向左旋转，然后暂停片刻，然后向右做同样的操作，继续进行同样的操作。如果您能给我一些关于如何使用Javascript（而不是Jquery或CSS）实现这一点的建议，我将不胜感激，因为我特别想练习我的Javascript技能，谢谢

函数spin（）
{
文件.getElementById（“myDIV”）；
setInterval（函数（）
{
myDIV.style.transform+=“旋转3d（0,10,0,10度）”；
}, 80);
}
自旋（）
我的3d文本
你不需要JS。它可以通过使用

在下面的代码片段中，我将div设置为通过定义的关键帧沿一个方向旋转，然后通过指定
animation direction:alternate它以交替方向旋转

请注意，我已将旋转的
z
分量保持为0.2，以便可以直观地看到它正在工作。对于您需要的内容，
z
组件应为零


#myDIV{
动画：5s线性无限交替旋转；
}
@关键帧旋转{
0%,
100% {
变换：旋转3d（0,1,0.2,0度）；
}
50% {
变换：旋转3d（0,1,0.2,360度）
}
}

我的3d文本
我想提供一个示例，说明如何使用来提供更流畅、一致的动画。使用
requestAnimationFrame
时，您可以计算自上次绘制以来应发生的更改量，然后进行相应更新，而不是依赖
setInterval
s interval来驱动度的更新频率

我还添加了传入id而不是使用固定元素的功能，并且我的函数返回一个可用于停止动画的函数


函数旋转（id）{
//只是一个标志，允许我们取消动画，如果我们想
让keepGoing=真；
//函数，该函数将返回以允许我们取消动画
const stop=（）=>keepGoing=false；
const el=document.getElementById（id）；
设度=0；
let dir=1；//动画的当前方向；1===向前，-1===向后
//原始代码每80毫秒移动动画10度，
//相当于每毫秒8度，因此速度为8
恒速=8；
//lastTime将用于跟踪自上次以来经过的毫秒数
//已调用回调。因为对回调的第一次调用将是
//手动而不是通过requestAnimationFrame，我们需要手动获取
//DOMHighResTimeStamp通过performance.now（）创建。
让lastTime=performance.now（）；
//此回调将与requestAnimationFrame一起使用以运行动画，
//它希望获得DOMHighResTimeStamp作为其参数，该参数
//requestAnimationFrame将在初始手册之后的每次调用中提供
//使用上面生成的最后一次调用它。
常量回调=当前时间=>{
//计算从现在到上次运行此回调之间的毫秒数
常数增量=当前时间-上次时间；
lastTime=当前时间；
//根据移动的时间计算我们应该移动多少度
//自上次回调以来（毫秒/度/毫秒）
常数变化=增量/速度；
//dir将为1或-1，乘以dir将增加
//或者通过“改变”度来减少“度”。
度+=方向*变化；
//应用新的转换
el.style.transform=`rotate3d（0,1,2，${degrees}deg`；
//如有需要，可反转方向
如果（度>=360）{
dir=-1；
}否则如果（谢谢，我知道我可以用CSS来做，但我特别想用Javascript来练习我的Javascript编程技能。看起来不错though@Emma45我还添加了一个JS版本。非常感谢alot Nisarg，我将研究您是如何使用Javascript实现的……我肯定会使用一个变量，就像您在这里所做的那样，而不是
+=
在
.style
属性上，就样式和可读性而言。但是，这里可能没有内存泄漏导致速度减慢的危险。我可能错了，但我相信当您在
.style
属性上使用
+=
时，它会相对于属性的当前计算值更新属性。t您第三次使用的是添加
20+10
，而不是
10+10+10
。也就是说，使用变量而不是串联会更快，因为您只是设置一个新值，而不是获取然后设置。@UselessCode这比您想象的要糟糕得多。浏览器实际上会附加字符串
rotate3d（0,10,0,10deg）
重复转换属性。尝试运行有问题的代码段，几秒钟后检查样式属性。无用的代码-看起来非常好而且简洁！将仔细查看