CSS ease-in-out transition not working properly - html

Question

I am using the CSS transition ease-in-out on a navigation bar for mouse hover.
However the transition only eases in when the mouse cursor hovers, and snaps back immediately after the cursor leaves the hyperlink area, it does not ease out smoothly.
This is the CSS I've used:
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 200px;
background-color: #036;
}
nav ul {
list-style: none;
margin-top: 15px;
}
nav ul li a {
text-decoration: none;
display: block;
text-align: center;
color: #fff;
padding: 10px 0;
}
.nav-logo {
margin-left: 20px;
background-color: #cacaca;
}
.nav-logo:hover {
transform: scale(1.1);
transition: all 1s ease-in-out;
}
nav ul li a:hover {
background-color: gold;
color: black;
border-radius: 10px;
transform: scale(1.1);
transition: .3s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
}

Answer 1

You need to take the transition styles:
transition: .3s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);
And remove them from the nav ul li a:hover and add them to the actual element nav ul li a
Whilst they remain on the hover, you are essentially removing the transition when not hovered, therefore the transition does not apply after you leave the hover state.

Answer 2

You need to add the transitions on the root element, not on the hover state.
nav {
background-color: yellow;
position: relative;
overflow: auto;
transition: background-color .3s ease-in-out;
}
nav:hover {
background-color: pink;
}
http://codepen.io/mrshannonyoung/pen/BLzpNz