html - CSS3 旋转回弹

Question

我正在尝试在我的网站上创建一个有趣的小玩具，基本上只要您将鼠标悬停在 Logo 上，它就会旋转直到您移开光标。我通过在 CSS3 中使用旋转实现了这一点，并且它正在运行。但我想知道是否有办法防止“Snapback”(当你悬停时将它平稳地带回原来的位置，而不是立即跳回)

我使用的代码是这样的:

    #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 */
}