懸停退出

Question

連續旋轉考慮以下小提琴：http://jsfiddle.net/a7EVf/5/

是否有可能有DIV上懸停輪換（有效度到360度，而不是0）出來，而不是逆時針移動回？

我寧可不使用JavaScript（包括jQuery的）如果可能的話 - 我知道這將是足夠簡單的設置

transform: rotate(360deg); /*also the vendor-specific versions*/ 

在使用JS原（它一旦達到360重置爲0無過渡），但是隻有使用CSS3才能做到這一點？

Answer 1

使用CSS3動畫，我們可以使塊旋轉從0到懸停180度，然後旋轉180至360度的不盤旋時。

#block { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 50px; 
 
    left: 100px; 
 
    top: 100px; 
 
    background: black; 
 
    color: white; 
 
    animation-name: out; /* animation to rotate on hover out*/ 
 
    animation-duration: 1s; /* duration for the animation, increase it to slow it down*/ 
 
} 
 
#block:hover { 
 
    animation-name: in; /* animation to rotate on hover */ 
 
    animation-duration: 1s; 
 
} 
 
@keyframes in { 
 
    from { 
 
    transform: rotate(0deg); 
 
    } 
 
    to { 
 
    transform: rotate(180deg); 
 
    } 
 
} 
 
@keyframes out { 
 
    from { 
 
    transform: rotate(180deg); 
 
    } 
 
    to { 
 
    transform: rotate(360deg); 
 
    } 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> 
 

 
<div id="block"></div>

---

注：

1. 這將導致塊在頁面加載也旋轉。除了使用JS以及在頁面加載時取消效果之外，沒有其他解決方案。
2. 正如你所說，有一點，當我們在進出在非常快的時間間隔懸停搶購的。這可以通過查看here和here的答案來解釋。一旦動畫不再適用（即選擇器不再適用），動畫將突然停止並返回到其原始未變形位置。