如何防止CSS3轉換回來？

Question

如何防止CSS3轉換回來？ 例如：當我使用

div 
{ 
-webkit-transition:-webkit-transform 2s; 
} 
div:hover 
{ 
-webkit-transform:rotate(360deg); 
} 

每當我提出我的鼠標了它旋轉回來，怎麼預防呢？所以當我將鼠標放在div上時它只能向前旋轉，而當鼠標離開div時不會旋轉回來？

Answer 1

這就是:hover的工作原理。只有當鼠標移過元素時纔有效。要做更長久的事情，你需要JavaScript。

Answer 2

您可以改爲使用CSS動畫，並將animation-fill-mode屬性設置爲forwards，這將保持結束狀態。

這是一個快速demo。正如你所看到的，它只能旋轉360度，然後停下來（這是你想要的嗎？）。如果你想讓它保持，只要你擁有鼠標放在div旋轉，則可以更改forwards到infinite並設置animation-timing-function到linear（保持一致的速度）。

像這樣：

animation: rotate 2s linear infinite; 

但是，當你徘徊了，因爲它打破了動畫&我不認爲有一個修復這個也不會好看。我希望這有助於。如果沒有，如另一個答案中提到的那樣，也許JavaScript解決方案會更好。

這裏是演示代碼。

HTML

<div class="box"></div> 

CSS

.box { 
    width: 100px; 
    height: 100px; 
    background: #333; 
} 

.box:hover { 
    -webkit-animation: rotate 2s forwards; 
    animation: rotate 2s forwards; 
} 

@-webkit-keyframes rotate { 
    100% { -webkit-transform: rotate(360deg); } 
} 

@keyframes rotate { 
    100% { transform: rotate(360deg); }  
} 

Answer 3

你可能已經解決了這個已經，但如果你沒有在這裏是解決一個360度的滾轉你的具體問題。

div 
{ 
    -webkit-transition: all 0.0s ; 
    -moz-transition: all 0.0s ; 
    -o-transition: all 0.0s ; 
    transition: all 0.0s; 
} 

div:hover 
    { 
    -webkit-transform: rotate(360deg); 
    -moz-transform: rotate(360deg); 
    transform: rotate(360deg); 

    -webkit-transition: all 2s ease; 
    -moz-transition: all 2s ease; 
    -o-transition: all 2s ease; 
    transition: all 2s ease; 

}