Html CSS3旋转回退

我正试图在我的网站上创建一个有趣的小玩具来玩，基本上只要你将徽标悬停，它就会旋转直到你移除光标。我通过在CSS3中使用rotate实现了这一点，并且它正在工作。但我想知道是否有一种方法可以防止“反弹”（当你松开时，平稳地将其恢复到原来的位置，而不是立即跳回去）

我使用的代码如下：

    #logo1:hover{
    -webkit-animation: spin 0.7s infinite linear;
-moz-animation: spin 0.7s infinite linear;
-o-animation: spin 0.7s infinite linear;
-ms-animation: spin 0.7s infinite linear;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
0% { -moz-transform: rotate(0deg);}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}

---

我感谢你的帮助

只需使用CSS3变换即可轻松完成您正在尝试的内容，此处不需要动画，因为您从0度到360度开始，所以请尝试此方法

.class {
   -moz-transform: rotate(0deg);
   /* Add up other required proprietary properties here */
   transition: all 1s; /* This will handle the transition to be 
                          smooth on mouse out */
}

.class:hover {
   -moz-transform: rotate(360deg);
   /* Add up other required proprietary properties here and 
      transition property is not required here */
}

---

您可以通过简单地使用CSS3变换轻松完成尝试，这里不需要动画，因为您是从0度到360度开始的，所以请尝试此方法

.class {
   -moz-transform: rotate(0deg);
   /* Add up other required proprietary properties here */
   transition: all 1s; /* This will handle the transition to be 
                          smooth on mouse out */
}

.class:hover {
   -moz-transform: rotate(360deg);
   /* Add up other required proprietary properties here and 
      transition property is not required here */
}

---

你好，谢谢。然而，它只旋转一次。有没有办法让它旋转一段时间，只要你把光标保持在div上，然后在你松开它的时候回到原来的位置？@SimonAndersson没有，你需要增加deg，比如360度、720度等等，如果你想继续动画，最好使用CSS3动画，您还可以将旋转度增加10倍，请参见您好，谢谢。然而，它只旋转一次。有没有办法让它旋转一段时间，只要你把光标保持在div上，然后在你松开它的时候回到原来的位置？@SimonAndersson没有，你需要增加deg，比如360度、720度等等，如果你想继续动画，最好使用CSS3动画，您还可以将旋转度增加10倍，并查看