CSS3旋转快照

Question

我试图在我的网站上创建一个有趣的玩具，基本上，每当您将徽标悬停在上面时，它都会旋转，直到您删除光标为止。 我通过在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);}
}

我感谢您的帮助！

Answer 1

只需使用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 */
}