CSS的Webkit轉型 - 慢於淡入淡出

Question

這是我有：

.box{ 
    background:#FFF; 
    -webkit-transition: background 0.5s; 
} 

.box:hover{ 
    background:#000; 
} 

但這追加到兩個的onmouseover和的onmouseout的行動，而不是有沒有辦法來控制它們？喜歡的東西：

-wekbkit-transition-IN: background 1s; 
-webkit-transition-OUT: background 10s; 

Answer 1

只是在僞元素中重新定義你的轉換。

.box{ 
    background: white; 
    -webkit-transition: background 5s; 
} 
.box:hover{ 
    background: olive; 
    -webkit-transition: background 1s; 
} 

看我http://jsfiddle.net/DoubleYo/nY8U8/

Answer 2

要麼使用一個animation（僅適用於當前的WebKit），或使用JS添加和刪除屬性，它們仍將動畫。