CSS Transitions on menu items not working - css

Question

it's the first time I'm using css transitions/transformations and it's not working out that well.
I'm simply trying to translate from bottom to position each entry of a toggled menu, but I'm getting strange results.
When I run the code within my app it executes the transition only on the first item of the list instead of all items.
When I run the same code from jsfiddle the transition doesn't work at all on any item.
Please see my jsfiddle here
I've looked at the documentation, at so many different examples and at many other solutions for similar issues. I've tried them all, defying height, removing display, but nothing seems to make any difference
<header>
<a id="menu">
<i class="fas fa-bars"></i>
</a>
</header>
<nav class="nav nav-sm">
<ul class="nav__list">
<li class="nav__item">ABOUT</li>
<li class="nav__item">SKILLS</li>
<li class="nav__item">WORKS</li>
</ul>
</nav>
header {
width: 100%;
z-index: 3;
display: flex;
align-items: center;
justify-content: right;
background-color: #68c7c1;
min-height: 56px;
transition: min-height 0.3s;
}
header #menu {
margin-left: auto;
margin-right:10px;
color: #eceeef;
font-size: 2em;
}
.nav {
width: 100%;
height: auto;
position: absolute;
z-index: 2;
display: flex;
flex-wrap: wrap;
background-color: #68c7c1;
}
.nav-sm, .nav-lg { display: none; }
.nav-sm.open {
display: flex;
flex-wrap: wrap;
align-items: center;
height: calc(100% - 56px);
margin-top: -2px;
}
.nav__list, .nav__item { width: 100%; }
.nav__list {
display: flex;
flex-wrap: wrap;
}
.nav__item {
height:50px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.nav__item a {
text-decoration: none;
text-align: center;
font-size: 1.2em;
color: #eceeef;
}
.nav-sm .nav__list .nav__item {
color: red;
transition: -transform 3s ease-in-out;
-moz-transition: -moz-transform 3s ease-in-out;
-webkit-transition: -webkit-transform 3s ease-in-out;
}
.nav-sm.open .nav__item {
padding-bottom: 80px;
font-size: 2em;
transform: translate(0,-50px);
-moz-transform: translate(0,-50px);
-webkit-transform: translate(0,-50px);
}
An example of what I'm trying to achieve is something similar to the menu of this portfolio.

Answer 1

What are you exactly trying to do ? animation ? transition when clicked ?
here is an example of how to write animation via css :
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
/* Standard syntax */
#keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

Answer 2

The way they did it in the example you provided is with js with some animation library, if you'd inspect their code you can see it happening.
To achieve this animation we'll have to make use of the delay property either way using animation or transition and you will have to add a delay on every item, so when you add a new item to the menu you'll have to add a delay to that item, we can automate this using js
Here's a demo using transition, the timing function, delay and the duration will need extra care, i'll leave that you to adjust to your desired end result.
var menu = document.querySelector("#menu");
var nav = document.querySelector(".nav-sm");
function openMenu(e) {
nav.classList.toggle("open");
e.stopPropagation();
};
function closeMenu(e) {
nav.classList.remove("open");
};
menu.addEventListener("click", openMenu);
#menu {
font-size: 2rem;
margin: 30px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
ul {
border: 1px solid;
list-style: none;
padding: 10px;
margin: 30px;
}
li {
opacity: 0;
transform: translateY(5px);
margin: 20px 0;
text-align: center;
}
a {
text-decoration: none;
padding: 5px 30px;
background: dodgerblue;
color: white;
}
.open li:nth-child(1) {
transition: all .4s linear;
}
.open li:nth-child(2) {
transition: all .4s .2s linear;
}
.open li:nth-child(3) {
transition: all .4s .4s linear;
}
.open li {
opacity: 1;
transform: translateY(0px);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<div id="menu">
<i class="fas fa-bars"></i>
</div>
<ul class="nav-sm">
<li>ABOUT</li>
<li>SKILLS</li>
<li>WORKS</li>
</ul>

Answer 3

So, I managed to achieve what I wanted by mixing both suggestions :)
Please see the result in this jsfiddle.
The reason why the transition wasn't working it's because I'm using display:none on the .nav. This problem is resolved by using animation instead and applying a delay on each list element.
Thank you for both answers!
header {
width: 100%;
z-index: 3;
display: flex;
align-items: center;
justify-content: right;
background-color: #68c7c1;
min-height: 56px;
transition: min-height 0.3s;
}
header #menu {
margin-left: auto;
margin-right:10px;
color: #eceeef;
font-size: 2em;
}
.nav {
width: 100%;
height: auto;
z-index: 2;
display: flex;
flex-wrap: wrap;
background-color: #68c7c1;
}
.nav-sm, .nav-lg { display: none; }
.nav-sm.open {
display: flex;
flex-wrap: wrap;
align-items: center;
height: calc(100% - 56px);
margin-top: -2px;
}
.nav__list, .nav__item { width: 100%; }
.nav__list {
display: flex;
flex-wrap: wrap;
}
.nav__item {
height:50px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
}
.nav__item a {
text-decoration: none;
text-align: center;
font-size: 1.2em;
color: #eceeef;
}
.nav-sm.open {
-webkit-animation: slide-down .3s linear;
-moz-animation: slide-down .3s linear;
}
.nav-sm.open .nav__item{
padding-bottom: 80px;
font-size: 2em;
}
.nav-sm.open .nav__item:nth-child(1) {
-webkit-animation: slide-down .3s .1s linear;
-moz-animation: slide-down .3s .1s linear;
}
.nav-sm.open .nav__item:nth-child(2) {
-webkit-animation: slide-down .3s .2s linear;
-moz-animation: slide-down .3s .2s linear;
}
.nav-sm.open .nav__item:nth-child(3) {
-webkit-animation: slide-down .3s .3s linear;
-moz-animation: slide-down .3s .3s linear;
}
#-webkit-keyframes slide-down {
0% { opacity: 0; -webkit-transform: translateY(-100%); }
100% { opacity: 1; -webkit-transform: translateY(0%); }
}
#-moz-keyframes slide-down {
0% { opacity: 0; -moz-transform: translateY(-100%); }
100% { opacity: 1; -moz-transform: translateY(0%); }
}