如何使用CSS或JavaScript在每次旋转之间暂停来旋转图像？

我有一张图片，我想从0旋转到90停止2秒，然后继续从90旋转到180，然后停止2秒到360度。谢谢。

您可以适当地使用

设置超时

和

设置间隔

：

const rotate=（图像，度）=>{
image.style.transform=`rotate（${+degrees}deg）`；
}
const img=document.getElementById（'js-logo'）；
const oneLoop=（）=>{
setTimeout（（）=>rotate（img，90），2000）；
设置超时（（）=>旋转（img，180），4000）；
设置超时（（）=>旋转（img，360），6000）；
}
oneLoop（）；
setInterval（（）=>oneLoop（），6000）
javascript示例


window.onload=function（）{
var-box=document.querySelector（'.box'）；
setInterval（函数（）{
box.classList.toggle（'rotate'）；
}, 2000);
}
.box{
宽度：200px；
高度：200px；
背景颜色：绿色；
}
.轮换{
动画：旋转1s；
}
@关键帧旋转{
从{
变换：旋转（0）；
}
到{
变换：旋转（90度）；
}
}
这里是使用动画关键帧的纯css示例

如果计算每个旋转动画和每个暂停时间的时间，则可以使用css动画关键帧百分比来执行所需css的序列

下面是一个例子，请参阅css中的注释


/*任何类型的html元素、img、div等*/
DIV{
背景：洋红；
颜色：白色；
位置：绝对位置；
最高：50%；
左：50%；
填充物：5雷姆。75雷姆；
转换：翻译（-50%）；
变换原点：中心；
/*4轮*/
/*4秒暂停*/
/*总共8个关键帧*/
/*2sec旋转时间示例*/
/*8*2秒为16秒，表示完整序列*/
动画：旋转暂停16秒无限；
}
/*旋转和暂停关键帧*/
@关键帧旋转暂停{
/*0秒*/
0% {
变换：平移（-50%）旋转（0度）；
}
/*2秒*/
12.5% {
变换：平移（-50%）旋转（90度）；
}
/*4秒*/
25% {
变换：平移（-50%）旋转（90度）；
}
/*6秒*/
37.5% {
变换：平移（-50%）旋转（180度）；
}
/*8秒*/
50% {
变换：平移（-50%）旋转（180度）；
}
/*10秒*/
62.5% {
变换：平移（-50%）旋转（270度）；
}
/*12秒*/
75% {
变换：平移（-50%）旋转（270度）；
}
/*14秒*/
87.5% {
变换：平移（-50%）旋转（360度）；
}
/*16秒*/
100% {
变换：平移（-50%）旋转（360度）；
}
/*如果“动画”设置为“无限”，则重新启动*/
}
/*演示重置css*/
HTML{
宽度：100%；
身高：100%；
最小高度：100%；
}
身体{
保证金：0；
填充：0；
宽度：100%；
身高：100%；
最小高度：100%；
溢出：隐藏；
位置：相对位置；
}
任何类型的html元素：img，div.
您可以使用CSS动画：


div{
宽度：80px；
高度：80px；
背景：线性梯度（#e66465，#9198e5）；；
动画：旋转停止10秒无限线性；
变换：旋转（）；
}
@关键帧旋转停止{
0%{
变换：旋转（0度）；
}
5%, 25%{
变换：旋转（90度）；
}
30%, 50%{
变换：旋转（180度）；
}
55%, 75%{
变换：旋转（270度）；
}
80%, 100%{
变换：旋转（360度）；
}
}
嗨，也许比我的答案更清楚。回答得好+1woops抱歉，我在发布这篇文章之前错过了你的！