web-dev-qa-db-ja.com

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

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

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

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

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

csscss3transitionscss-transitions
45
Marcel

hoverとmouseoutで異なるCSS遷移遅延が必要な場合は、関連するセレクターを使用してそれらを設定する必要があります。以下の例では、要素がホバーされると、ホバーの初期遅延は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

105
Marcel

ここに簡略化された 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;
}
13
Dan Manastireanu
/* 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" */
3
Nebojša Ložnjaković