Hover off transition is not working - html

Question

I have a Login "Button", when hovering, a login Form should become visible. It should expand from the button.
It works fine on hover, but when the mouse leave the button (hover off) the transition is not working.
Hope it is clear, what i want to achiev.
Here is a simplified fiddle with the problem:
https://jsfiddle.net/ze7qpx02/
Thank you!
body{
margin-left: 300px;
}
.parent {
padding: 5px;
border-width: thin;
border-style: solid;
font-size: 15px;
position: relative;
display: inline-block;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.parent:hover {
border-bottom-color: transparent;
padding-bottom: 30px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.child{
position: absolute;
height: 0px;
width: 100%;
bottom: 0;
right: -1px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.parent:hover .child{
height: calc(240px - 100%);
bottom: calc(-240px + 100%);
width: 240px;
border-style: solid;
border-width: thin;
border-top-style: none;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
<div class="parent">
Login
<div class="child">
</div>
</div>

Answer 1

Since you add the border to child only when the parent is hovered, it disappears immediately when the hover end. You can add the border to the child with a transparent color, and change the color when hovered.
btw - unless the transitions change when hovered, you can set them only on the elements, no need to include them again on the hovered state.
body {
margin-left: 300px;
}
.parent {
padding: 5px;
border-width: thin;
border-style: solid;
font-size: 15px;
position: relative;
display: inline-block;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.parent:hover {
border-bottom-color: transparent;
padding-bottom: 30px;
}
.child {
position: absolute;
height: 0px;
width: 100%;
bottom: 0;
right: -1px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all 0.3s ease-in-out;
border: transparent solid thin;
border-top-style: none;
}
.parent:hover .child {
height: calc(240px - 100%);
bottom: calc(-240px + 100%);
width: 240px;
border-color: black;
}
<div class="parent">
Login
<div class="child">
</div>
</div>

Answer 2

Actually the transition is working. Your problem is the border get lost suddenly. So copy this to your .child, you will see that is working;
border-style: solid;
border-width: thin;
border-top-style: none;

Answer 3

The transition works but you cannot 'see' it because .child does not have border set on it's default style. The border is only on parent hover. So when you 'un hover' , the border disappears instantly.
So you should set the border to the default style ( transparent if you want ) and then on hover set a a color to that border . Also, transitions don't have to be used on both default and hover state. ( if they are the same ) . Use them only on default styles and so they will work on both states.
See snippet below
body {
margin-left: 300px;
}
.parent {
padding: 5px;
border-width: thin;
border-style: solid;
font-size: 15px;
position: relative;
display: inline-block;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.parent:hover {
border-bottom-color: transparent;
padding-bottom: 30px;
}
.child {
position: absolute;
height: 0px;
width: 0px;
bottom: 0;
right: -1px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
border-style: solid;
border-width: thin;
border-top-style: none;
border-color: transparent;
}
.parent:hover .child {
height: calc(240px - 100%);
bottom: calc(-240px + 100%);
width: 240px;
border-color: red;
}
<div class="parent">
Login
<div class="child">
</div>
</div>

Answer 4

Its working Try this....
body{
margin-left: 300px;
}
.parent {
padding: 5px;
border-width: thin;
border-style: solid;
font-size: 15px;
position: relative;
display: inline-block;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.parent:hover {
border-bottom-color: transparent;
padding-bottom: 30px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.child{
position: absolute;
height: 0px;
width: 100%;
bottom: 0;
right: -1px;
border-style: solid;
border-width: thin;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.parent:hover .child{
height: calc(240px - 100%);
bottom: calc(-240px + 100%);
width: 240px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
<div class="parent">
Login
<div class="child">
</div>
</div>