我正在尝试从css中自动旋转5秒后的图像

我正在尝试从css中自动旋转图像5秒后。我的代码正在工作，但只在悬停状态下工作，但我希望在悬停状态下和不悬停状态下都工作。到目前为止，我所做的工作如下

.circle-border:hover {
-webkit-transform: rotate(720deg);
    -moz-transform: rotate(720deg);
    -o-transform: rotate(720deg);
    -ms-transform: rotate(720deg);
    transform: rotate(720deg);
    transition: transform 0.9s ease 0.3s;
}

<div class="circle-border">
        <img class="img-circle" src="images/web.jpg" alt="service 1">
</div>

。圈出边框：悬停{
-webkit变换：旋转（720度）；
-moz变换：旋转（720deg）；
-o变换：旋转（720度）；
-ms变换：旋转（720度）；
变换：旋转（720度）；
转换：转换0.9秒轻松0.3秒；
}

---

提前感谢

您需要的是动画而不是转换

这个动画是6秒长，但旋转只发生在持续时间的最后1/6…这给了我们每5秒1秒的动画

div{
宽度：100px；
高度：100px；
背景#663399；
保证金：1em自动；
-webkit动画名称：微调器；
动画名称：微调器；
-webkit动画持续时间：6s；
动画持续时间：6s；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画计时功能：线性；
动画计时功能：线性；
}
@-webkit关键帧微调器{
83.33% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}
@关键帧微调器{
83.33% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}

---

您需要的是动画，而不是转换

这个动画是6秒长，但旋转只发生在持续时间的最后1/6…这给了我们每5秒1秒的动画

div{
宽度：100px；
高度：100px；
背景#663399；
保证金：1em自动；
-webkit动画名称：微调器；
动画名称：微调器；
-webkit动画持续时间：6s；
动画持续时间：6s；
-webkit动画迭代计数：无限；
动画迭代次数：无限；
-webkit动画计时功能：线性；
动画计时功能：线性；
}
@-webkit关键帧微调器{
83.33% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}
@关键帧微调器{
83.33% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}

---

我使用Javascrit来实现它，但是它仍然可以单独使用css来实现 但也许有用，希望能有所帮助

var circle=document.getElementById（“测试”）；
if（circle.classList.contains（“移动”））{
setInterval（函数（）{
“严格使用”；
圈出.classList.add（“移动”）；
}, 2000);
setInterval（函数（）{
“严格使用”；
圈出.classList.remove（“移动”）；
}, 5000);
}

。圈出边框{
宽度：100px；
高度：100px；
背景色：#F00；
}
.搬家{
动画：圆圈。9秒轻松1；
}
.圆形边框：悬停{
-webkit变换：旋转（720度）；
-moz变换：旋转（720deg）；
-o变换：旋转（720度）；
-ms变换：旋转（720度）；
变换：旋转（720度）；
转换：转换0.9秒轻松0.3秒；
}
@关键帧圆{
0%{变换：旋转（0）}
100%{变换：旋转（720deg）}
}

---

我使用Javascrit来实现它，但是它仍然可以单独使用css来实现 但也许有用，希望能有所帮助

var circle=document.getElementById（“测试”）；
if（circle.classList.contains（“移动”））{
setInterval（函数（）{
“严格使用”；
圈出.classList.add（“移动”）；
}, 2000);
setInterval（函数（）{
“严格使用”；
圈出.classList.remove（“移动”）；
}, 5000);
}

。圈出边框{
宽度：100px；
高度：100px；
背景色：#F00；
}
.搬家{
动画：圆圈。9秒轻松1；
}
.圆形边框：悬停{
-webkit变换：旋转（720度）；
-moz变换：旋转（720deg）；
-o变换：旋转（720度）；
-ms变换：旋转（720度）；
变换：旋转（720度）；
转换：转换0.9秒轻松0.3秒；
}
@关键帧圆{
0%{变换：旋转（0）}
100%{变换：旋转（720deg）}
}

使用

转换延迟：5s仅使用css是不可能的。您可以使用JS。将html代码放在此处。代码已更新。Html代码共享。如何使用动画？请分享。。Thanksuse
转换延迟：5s仅使用css是不可能的。您可以使用JS。将html代码放在此处。代码已更新。Html代码共享。如何使用动画？请分享。。谢谢