CSS width transition out not working - html

Question

Below is the HTML and CSS I'm using. Unfortunately the questions already asked do not give the answer required. Basically it decreases the width of all siblings and increases the one that is hovered over. I'm using ease-in-out but the OUT part of the transition just instantaneously jumps back to its original state.
html {
background: #000066;
}
body {
height: 100%;
background: #cfcfd0;
margin: 4% 4% 4% 4%;
}
#title {
background: ;
text-align: center;
margin: 2% 2%;
padding: 2% 2%;
}
#nav {
width: 90%;
overflow: auto;
margin: 0 auto;
padding: 0px 0px 0px 0px
}
ul {
margin: 4% auto;
padding: 0;
width: 100%;
list-style-type: none;
overflow: auto;
}
li {
box-sizing: border-box;
text-align: center;
display: inline-block;
float: left;
width: 33.33%;
padding: 2% 0;
margin: 0%;
background: blue;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
li:first-child {
border-left: 1px solid black;
}
li:last-child {
border-right: 1px solid black;
}
a {
color: black;
text-decoration: none;
}
ul:hover > li:hover {
width: 37.33%;
color: white;
background: darkblue;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
ul:hover > li {
width: 31.33%;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
}
<div id="title">
<h1>Projects Home</h1>
</div>
<div id="nav">
<ul>
<li>Project 1
</li>
<li>Project 2
</li>
<li>Project 3
</li>
</ul>
</div>
I can't figure out why this is.

Answer 1

Any CSS property gets applied to an element only when the selector is matched. When transition property is specified under the :hover selector, they naturally get applied only when the hover is on. When we hover out, they just snap back because the transition setting is no longer applicable for the element.
In your case, since transition is specified only within ul:hover > li:hover and ul:hover > li it gets applied only when the mouse is over an li or when the mouse is atleast over the ul (that is when we are moving from one li to another while still being inside the ul boundaries).
To get the transition to work properly even during mouse out, it should be specified within the li selector like in the below snippet.
html {
background: #000066;
}
body {
height: 100%;
background: #cfcfd0;
margin: 4% 4% 4% 4%;
}
#title {
background: ;
text-align: center;
margin: 2% 2%;
padding: 2% 2%;
}
#nav {
width: 90%;
overflow: auto;
margin: 0 auto;
padding: 0px 0px 0px 0px
}
ul {
margin: 4% auto;
padding: 0;
width: 100%;
list-style-type: none;
overflow: auto;
}
li {
box-sizing: border-box;
text-align: center;
display: inline-block;
float: left;
width: 33.33%;
padding: 2% 0;
margin: 0%;
background: blue;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
li:first-child {
border-left: 1px solid black;
}
li:last-child {
border-right: 1px solid black;
}
a {
color: black;
text-decoration: none;
}
ul:hover > li:hover {
width: 37.33%;
color: white;
background: darkblue;
}
ul:hover > li {
width: 31.33%;
}
<div id="title">
<h1>Projects Home</h1>
</div>
<div id="nav">
<ul>
<li>Project 1
</li>
<li>Project 2
</li>
<li>Project 3
</li>
</ul>
</div>

Answer 2

Remove the > on ul:hover > li to ul:hover li:
html {
background: #000066;
}
body {
height: 100%;
background: #cfcfd0;
margin: 4% 4% 4% 4%;
}
#title {
background: ;
text-align: center;
margin: 2% 2%;
padding: 2% 2%;
}
#nav {
width: 90%;
overflow: auto;
margin: 0 auto;
padding: 0px 0px 0px 0px
}
ul {
margin: 4% auto;
padding:0;
width: 100%;
list-style-type: none;
overflow: auto;
}
li {
box-sizing: border-box;
text-align: center;
display: inline-block;
float:left;
width: 33.33%;
padding: 2% 0;
margin: 0%;
background: blue;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
}
li:first-child {
border-left: 1px solid black;
}
li:last-child {
border-right: 1px solid black;
}
a {
color: black;
text-decoration: none;
}
ul:hover > li:hover{
width: 37.33%;
color: white;
background: darkblue;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
ul:hover li {
width: 31.33%;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
}
<div id= "title">
<h1>Projects Home</h1>
</div>
<div id= "nav">
<ul>
<li>Project 1</li>
<li>Project 2</li>
<li>Project 3</li>
</ul>
</div>