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

Over疑似要素で遷移を再定義するだけです。

.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を使用してプロパティを追加および削除しても、それらは引き続きアニメーション化されます。