CSS3トランジションでマウスオーバー/ホバーを遅らせる

Question

私はホバリングされたときにサイズが変わるボックスを持っています。しかし、古いサイズを元に戻す前に、ボックスが新しいサイズを数秒間維持するように、マウス出力ステージを遅らせたいと思います。

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

div:hover { 
    width:130px; 
} 

これはJavascriptとCSS3なしで可能ですか？私はウェブキットを気にする必要があります。

Answer 1

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秒間待機します。

Fiddle

Answer 2

遷移が

transition: .5s all 5s 

として宣言することができる は、あなたが別遷移遅延を必要としない（速記、最初の数は持続時間である、第二の数は遅延である）

申し訳ありませんが、私は十分なポイントがないので、コメントとして追加することはできません