CSS3旋轉Snapback

Question

我想創建一個有趣的玩具在我的網站上玩，基本上只要你將鼠標懸停在標誌上，它就會旋轉，直到你移除光標。我已經通過在CSS3中使用旋轉來實現這一點，並且它正在工作。但我想知道是否有防止「折返」（順手把它恢復到原來的位置，當你unhover，而不是它只是跳回到瞬間）

我使用的代碼的方式是這樣的：

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