Transition hover div css

Question

I try to add a delay on a transition.

I have these rules :

#mydiv{
  z-index : 100;
  top : 50%;
  left : 50%; 
  -webkit-transition:width 1s, height 1s, background-color 1s ,-webkit-transform 1s, margin-left 1s;
  transition:width 1s, height 1s, background-color 1s, transform 1s, margin-left 1s;
}

#mydiv:hover{
  width : 700px;
  margin-left : -350px;
  text-align : left;
}

I know I can add "transition-delay" but I don't want a delay on hover but only when I quit the hover state.

I prefer to code it with css, not with JS ...

Any solution ?

Answer 1

Add transition-delay on #mydiv, then overwrite it on :hover.

#mydiv{
    z-index : 100;
    top : 50%;
    left : 50%; 
    -webkit-transition:width 1s, height 1s, background-color 1s ,-webkit-transform 1s, margin-left 1s;
    transition:width 1s, height 1s, background-color 1s, transform 1s, margin-left 1s;
    transition-delay: .5s;
}
#mydiv:hover{
    width : 700px;
    margin-left : -350px;
    text-align : left;
    transition-delay: 0;
}

Example fiddle:

http://jsfiddle.net/Sx2s5/

Answer 2

I think you will find this answer a bit useful: CSS: opposite of :hover (on mouse leave)? CSS doesn't have a command for "unhovering" but you could attach what you want on the a.

Answer 3

Here's a simpler way to do it without transition-delay: http://jsfiddle.net/v7BnQ/ .

HTML:

<div id = "mydiv">Generic Division</div>

CSS:

body {
    overflow: hidden;
}

#mydiv{
    position: absolute;
    top : 50%;
    left : 50%; 
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);

    -webkit-transition: all 2s;
    transition: all 2s;
}

#mydiv:hover{
    width : 700px;
    margin-left : -350px;
    text-align : left;
    transition-duration: 0s;
}

Answer 4

Try to set this line on #mydiv : transition: all 0.5s linear; You will be able to feel a little delay when you quit the hover state on a link.