Make ul fade in after css transition - html

Question

I'm having an issue with creating a navigation system on my website. Once you hover over the navigation it extends to fit the categories of the website which are in a ul. I know what the issue is, because the width of the parent of the ul is too small to contain the text, the text has to shrink before the transition.
So I was wondering, is there a way to transition the text in once the width is done animating. Or are there any other solutions?
CSS:
.navigation {
width: 3.5vw;
height: 7vh;
background-color: #fcc101;
margin: 1vw;
border-radius: 4rem;
font-family: 'Work Sans', sans-serif;
transition: all 1s ease-in;
background-image: url('menu.svg');
background-size: 30px;
background-repeat: no-repeat;
background-position: center center;
position: fixed;
}
.navigation .ul a {
visibility: hidden;
opacity: 0;
transition: all 1s ease-in-out;
}
.navigation .ul {
visibility: hidden;
}
.navigation:hover {
width: 25vw;
border-radius: 3rem;
background-image: none;
background-size: 30px;
background-repeat: no-repeat;
background-position: center center;
}
.navigation:hover ul a {
opacity: 1;
visibility: visible;
}
li {
display: inline;
}
a {
color: white;
text-decoration: none;
font-size: 1.25rem;
}
.ul {
text-align: left;
line-height: 7vh;
padding-left: 2vw;
word-spacing: 1vw;
}
Here is the site.
Thanks.

Answer 1

One solution could be to apply an animation-delay to your ul which is >= your other animations run time. This way the animation should only fire once the other one has completed.
animation-delay: 3s;
Something similar to the above should work just fine.
Or, if you are using transitions then you can use the transition-delay property instead!
transition-delay: 3s;

Answer 2

Well, I spotted a couple of issues with your animation!
The first issue is, that the "contact" menu item shows up under the other menu items and that when the animation is still in progress, the menu items get under each other.
To fix this issue you need to add this:
.navigation .ul {
visibility: hidden;
position:absolute; /* We need a position absolute so it won't be effected by the size of the parent div */
width:400px; /* Set the width to whatever works for you */
}
As for delaying the animation, you can add this:
.navigation .ul {
visibility: hidden;
position:absolute; /* We need a position absolute so it won't be effected by the size of the parent div */
width:400px; /* Set the width to whatever works for you */
-webkit-transition-delay: 2s; /* You can set the delay to whatever you need */
transition-delay: 2s; /* You can set the delay to whatever you need */
}
I also think that you should maybe make the animation a bit faster and more fluid, and maybe have it on click instead of on hover.