How to apply transition when the hover is removed or gone?

Question

I have given header a transition using pseudo class hover. But i want it to go to it's original position with the same cubic-bezier transition function in 0.5s. You can see it abruptly goes back when hover is taken off. So is there any pseudo class for hover out or will i have to use jQuery?

header{
  background:#000;
  padding:50px ;
  -webkit-transition: 0s padding-bottom;
}
header:hover{
  padding-bottom:90px;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
}

<header>
  </header>

score 4 · Answer 1 · answered Feb 11 '15 at 15:34

You need to put all the transition related styles on the header class, not the :hover state. Try this:

header {
    background: #000;
    padding: 50px ;
    -webkit-transition: 0.5s padding-bottom;
    -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
header:hover {
    padding-bottom: 90px;
}

<header></header>

score 3 · Accepted Answer · answered Feb 11 '15 at 15:38

you just have to give the transition to the header.. so the element still has the style also you do not hover any more. right now the transition is set to the hover so it only transitions on hover ;) see code snippet

header {
  background: #000;
  padding: 50px;
  -webkit-transition: padding-bottom 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
header:hover {
  padding-bottom: 90px;
}

<header>
</header>

score 1 · Answer 3 · answered Feb 11 '15 at 15:34

Set the duration properties outside the :hover style too, as you did with the transition one...

header{
  background:#000;
  padding:50px ;
  -webkit-transition: 0s padding-bottom;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: cubic-bezier(0.175,0.885,0.320,1.275);
}
header:hover{
  padding-bottom:90px;
}

<header>
  </header>

How to apply transition when the hover is removed or gone?

3 Answers3