複数の異なるオフ/アウト遷移CSS

Question

白いボックスを想像してください。状況に応じて、ボックスは青色または赤色に変わることができます。私は箱を青色から白色にゆっくりと戻すが、赤色から白色へと急速に後退するはずだ。ボックスの移行は白に戻ったときに両方のフェードに適用されるように見えるので、どのように達成するのですか。

私は最近、CSSトランジションについて多くの検索と読書を行っています。私は今、2つの状態間で要素を異なる方法で遷移させる方法を知っています。状態AからBに素早く戻ってゆき、状態Bから状態Aにゆっくり戻ってゆきます。

しかし、要素が常にAからBに同じように遷移するように便利な方法がありますか？たとえば、BからAに戻って戻ってみたいと言っています。複数の異なる方法で基本状態にホバーします。最初は速く、次回は遅くして、3回目はゆっくりします。要素。

いつものように：これはCSSでのみ可能ですか？

おかげ

Answer 1

は、実際にuがすぐに戻ってほしいのホバー状態の推移を設定する必要があります。ここ

div.a{ 
width:200px; 
height:200px; 
background: blue; 
margin-bottom:10px; 
} 
div.a:hover{ 
background: red; 
transition: all 1s; 
} 

一方または両方の方法を行くトランジションの素晴らしい例だhttps://jsfiddle.net/waf745hf/