爲什麼我的css按鈕在懸停時顯示'animate'？

Question

我剛剛發現使用CSS按鈕比舊的Javascript mouseover更好。所以我想我會試一試。

當我把新代碼側翻的標誌。我注意到當您將鼠標移動到徽標上時。該徽標顯示「旋轉」動畫，而不是「交換」圖像。我想知道爲什麼這樣做？

您可以看看鏈接嘗試：http://www.streetlightministries.ca/2013 - 移動你的鼠標上的標識 - 你可以看到我在說什麼。

我希望你能幫助我。

謝謝！

Answer 1

你的問題可能就出在這CSS定義，您適用於所有<a>元素。

transition: all 0.5s ease 0s; 

與事實

一起，正在使用精靈圖像，在子畫面，其被示出的部分的變化，是動畫與過渡。

爲了克服這一點無論指定更詳細的，其過渡要動畫或使用這樣的抵消過渡爲您的標誌：

#logo { 
    transition: none; 
} 

Answer 2

你有一個0.5秒transition在CSS設置的所有錨。修復程序會

#logo { 
    transition: none; 
} 

Answer 3

這是因爲「過渡」。在您的CSS中，從錨點中移除過渡元素。或者，向#logo添加「transition：none」。

Answer 4

爲什麼使用transition: none？只要刪除它！