麻煩越來越CSS過渡工作

Question

我試圖讓我的頭周圍CSS3過渡包裹着，我不知道是否有什麼問題我的理解，或者如果瀏覽器不配合。

首先，我認爲Opera應該支持轉換，因爲版本10左右，但是transition和-o-transition似乎都不會在11.62中做任何事情。或者Opera使用不同的語法？

反正，我可以通過編寫

div {transition:background 2s;} 
div:hover {background:lime} 

OK到目前爲止做出的背景顏色淡入和淡出與大多數其他瀏覽器徘徊，而我也可以讓這個背景淡入，但不出，以書面

div:hover {transition:background 2s; background:lime} 

和背景淡出，而不是像這樣：

div {transition:background 2s;} 
div:hover {transition:background 0s; background:lime} 

但我不明白爲什麼會發生這種情況。根據文檔，一個0s持續時間的過渡不應該有任何效果，那麼爲什麼最後一個會有不同的結果？

jsFiddle

Answer 1

從你的例子，它看起來像它的行爲像我期望它。 轉換從一個狀態運行到另一個狀態。

我會盡力的解釋，盡我所能。

在最後一個，你對<div> 2S的變遷理論在正常狀態下和0的最後的那一個<div>過渡的懸停狀態。

那麼發生了什麼？

1. 當你將鼠標懸停在<div>，狀態更改爲:hover等爲div:hover過渡運行。你有一個0的trasition，所以沒有動畫運行。
2. 當您從<div>中刪除鼠標時，狀態將從:hover更改回正常狀態，因此將運行處於正常狀態的div的轉換。你有這個在2秒。

這是否解釋發生了什麼以及轉換如何工作？

Answer 2

我假設你正在尋找的是ease計時功能。

所以你的CSS規則應該是這個樣子。

.class { 
    transition: property(ies) duration timing-function; 
} 

.class:hover { 
    property(ies): new value; 
} 

對於Opera，您必須定義確切的屬性。在你的情況下，它不會是背景財產，但背景色財產。