如何在立方貝塞爾方法上禁用css3轉換mouseleave效果？

Question

我有一個CSS3 rotatetransform與cubic-beziertransition-timing-function，它在鼠標上工作正常，但我想禁用mouseleave動畫。我準備了一個簡單的jsFiddle向你展示。

img { 
    transition : all 1s cubic-bezier(0.680,-0.550,0.265,1.550); 
} 

img:hover { 
    transform: rotate(360deg); 
} 

Answer 1

你的意思是說，當你懸停時，你不希望它轉回來？您可以使用「無限」（實際上非​​常大）transition-delay（這是shorthand中的第二次值）。

像這樣：

demo

CSS：

img { 
    transition: 0s 99999s; /* transition when mouse leaves */ 
} 
img:hover { 
    transform: rotate(360deg); 

    /* transition on mouseover */ 
    transition: 1s cubic-bezier(0.680,-0.550,0.265,1.550); 
} 

注意，這將會使圖像僅在第一懸停旋轉。

---

如果你想讓它旋轉每個懸停，那麼你將不得不使用keyframe animations。就像這樣：

demo

CSS（不帶前綴，你就必須添加的話）：

img:hover { 
    animation: rot 1s cubic-bezier(0.680,-0.550,0.265,1.550); 
} 
@keyframes rot { 
    to { 
     transform: rotate(360deg); 
    } 
} 

---

另外，我注意到，你先寫前綴的屬性 - 你應該永遠把它放在最後。特別是現在，當即將到來的IE，Firefox和Opera版本都是無法過渡的時候。