How to make reverse transition after :hover - html

Question

From my understanding of CSS3 transitions you have to specify the transition only in the base element and not in the :hover element, e.g. as described in the Mozilla documentation. This should lead to a transition when the new properties from :hover are applied and reverse the transition as soon as you don't hover anymore. (Fiddle below code)
#test{
position:absolute;
height: 100px;
width: 100px;
background-color: #A8A8A8;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#test:hover{
border-bottom: 10px solid black;
}
But this leads to fading-in only. When you stop hovering the border is instantly removed.
http://jsfiddle.net/hcsamkjf/1/
Any ideas?

Answer 1

You also need to specify the "initial state", otherwise the browser doesn't know what to animate. It can sometimes guess, which would be why you see it half-working (but it doesn't transition at all for me).
Add border-bottom:10px solid transparent or border-bottom:0 solid transparent to your #test styles, depending on the exact effect you want.

Answer 2

The issue is that as you are not specifying a border-style in the initial state, when you "unhover", the animation changes from solid to the default value : none. Border-style isn't animatable so the change is sudden.
You need to specify the same border-style in the initial state (note: specify a 0 border-width too to remove default border width) so the animation only affects border-width and stays smooth in both directions.
DEMO
CSS :
#test{
position:absolute;
height: 100px;
width: 100px;
background-color: #A8A8A8;
border-style: solid;
border-width:0px;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#test:hover{
border-bottom: 10px solid black;
}