css - CSS Webkit Transition - フェードインよりゆっくりフェードアウト

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;

score 31 · Accepted Answer

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

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

score 0 · Accepted Answer

アニメーション(現在は webkit のみ) を使用するか、JS を使用してプロパティを追加および削除すると、引き続きアニメーション化されます。

2 に答える 2