Delay mouseout/hover with CSS3 transitions

Question

I've got a box that changes size when being hovered. However, I would like to delay the mouseout stage, so that the box keep the new size for a few seconds, before getting the old size back.

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

Is this possible to do WITHOUT Javascript and only CSS3? I only have to care about supporting webkit.

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; } 

This will trigger the mouseover state right away, but wait 5 sec till the mouseout is triggered.

Fiddle