css - 異なるCSS遷移-ホバーとマウスアウトの遅延？

Question

「状態」を切り替える遅延が異なるCSS3トランジションを使用することは可能ですか？たとえば、ホバーしてから「マウスアウト」で要素をすぐに高くして、要素の初期の高さに戻る前に1秒待機しようとしています。

デモページ： jsfiddle.net/RTj9K（右上隅のブラックボックスにカーソルを合わせる）

CSS： #bar { transition:.4s ease-out 0, 1s; }

最後のタイミングは遅れに関係していると思いましたが、思った通りに動いていないようです。

Answer 1

hoverとで異なるCSS遷移遅延が必要な場合mouseoutは、関連するセレクターを使用してそれらを設定する必要があります。以下の例では、要素がホバーされたとき、ホバー時の最初の遅延はです0がmouseout、遷移時の遅延は1s。です。

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }

完全なCSSは、以下の私の質問の更新されたデモにあります。省略形のtransitionプロパティを使用しました。値の順序は次のとおりです。

transition:<property> <duration> <timing-function> <delay>;

回答デモ： http： //jsbin.com/lecuna/edit？html 、css、output

Answer 2

これは、簡略化されたJSFiddleの例です。transition-delay基本的に、プロパティが必要です。

#transform {
    height:40px;
    width:40px;
    background-color:black;
    transition: .4s ease-out; 
    transition-delay: 2s;
    /*or shorthand: transition: .4s ease-out 2s;*/
}

#transform:hover {
    transition: .4s ease-out; 
    width:400px;
}

Answer 3

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0; }

's'（秒）記号を入力しないと、これは機能しないと言うだけなので、次のようになります。

/* These transition properties apply on "mouseout" */
#bar { transition:height .5s ease-out 1s; } 

/* These transition properties apply on hover */
#bar:hover { transition:height .5s ease-out 0s; }   /* note "0s" */