web-dev-qa-db-ja.com

CSS3遷移によるマウスアウト/ホバーの遅延

ホバーするとサイズが変わるボックスがあります。ただし、マウスアウトステージを遅らせて、ボックスが新しいサイズを数秒間保持してから、古いサイズに戻すようにします。

div {
    width: 70px;
    -webkit-transition: .5s all;    
}

div:hover {
    width:130px;
}

これはJavaScriptなしでCSS3のみで実行できますか？ webkitをサポートすることだけに関心があります。

csswebkitcss-transitions
17
patad
div {
    width: 70px;
    -webkit-transition: .5s all;   
    -webkit-transition-delay: 5s; 
    -moz-transition: .5s all;   
    -moz-transition-delay: 5s; 
    -ms-transition: .5s all;   
    -ms-transition-delay: 5s; 
    -o-transition: .5s all;   
    -o-transition-delay: 5s; 
    transition: .5s all;   
    transition-delay: 5s; 
}

div:hover {
    width:130px;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -ms-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
}

これにより、マウスオーバー状態がすぐにトリガーされますが、マウスアウトがトリガーされるまで5秒待ちます。

フィドル

39
patad

遷移は次のように宣言できます

transition: .5s all 5s

（省略形、最初の数値は継続時間、2番目の数値は遅延です）個別の遷移遅延は必要ありません

申し訳ありませんが、十分なポイントがないためコメントとして追加できません

6
Jenny