CSS Opacity Transition - html

Question

used the following as a basis for what I'm doing here: https://codepen.io/plavookac/pen/qomrMw
I'm trying to get the movement to change opacity as well, however this isn't covered by the standard transition markers.
.mainInner{
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div{
display:table-cell;
vertical-align: middle;
font-size: 4em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
margin-top: 0px;
transform: translateY(-80px);
transition: opacity 350ms ease-in-out;
transition: transform 350ms ease-in-out;
z-index: 1;
position: relative;
opacity: 0.7;
}
.sidebarMenuInner{
position: relative;
margin:0;
padding:0;
top: 30px;
right: -40px;
width: 150px;
background: linear-gradient(0deg, #bee 00%, #bbe 100%);
border-top: px solid rgba(255, 255, 255, 0.10);
border-left: px solid rgba(0, 0, 0, 1);
}
.sidebarMenuInner li{
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}
.sidebarMenuInner li span{
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.spinnerContainer {
position: relative;
height: 100%;
width: 100%;
top: 30px;
left: 20px;
height: 22px;
width: 22px;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: relative;
z-index: 99;
height: 100%;
width: 100%;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #000;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
<nav class="navbar navbar-light custom-navbar" >
<div class="container">
<div class="spinnerContainer" >
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu" >
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1" ></div>
<div class="spinner horizontal" ></div>
<div class="spinner diagonal part-2" ></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</div>
</div>
</div>
<br>
</nav>
Mechanical engineer here, so just trying to get enough html together for a portfolio - I tried to cut the CSS/html down, but not sure what's required. Any pointers would be appreciated.

Answer 1

It is actually covered by the standard transition markers:
In your #sidebarMenu, chain transition instead of separate them with two lines, add opacity 0 as the initial state;
#sidebarMenu {
transition: transform 250ms ease-in-out, opacity 350ms ease-in-out;
opacity: 0;
}
When the state of the menu is toggled, change it to opacity: 1
input[type="checkbox"]:checked ~ #sidebarMenu {
transform: translateX(0);
opacity: 1;
}

Answer 2

If you want to transition 2 (or more) properties, you should comma separate them. Otherwise the first declaration for transition gets overridden by the second.
.mainInner {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.mainInner div {
display: table-cell;
vertical-align: middle;
font-size: 4em;
font-weight: bold;
letter-spacing: 1.25px;
}
#sidebarMenu {
margin-top: 0px;
transform: translateY(-80px);
transition: transform 350ms ease-in-out, opacity 350ms ease-in-out;
z-index: 1;
position: relative;
opacity: 0.7;
}
.sidebarMenuInner {
position: relative;
margin: 0;
padding: 0;
top: 30px;
right: -40px;
width: 150px;
background: linear-gradient(0deg, #bee 00%, #bbe 100%);
border-top: px solid rgba(255, 255, 255, 0.10);
border-left: px solid rgba(0, 0, 0, 1);
}
.sidebarMenuInner li {
list-style: none;
color: #fff;
text-transform: uppercase;
font-weight: bold;
padding: 20px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}
.sidebarMenuInner li span {
display: block;
font-size: 14px;
color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a {
color: #fff;
text-transform: uppercase;
font-weight: bold;
cursor: pointer;
text-decoration: none;
}
input[type="checkbox"]:checked~#sidebarMenu {
transform: translateX(0);
opacity: 1;
}
input[type=checkbox] {
transition: all 0.3s;
box-sizing: border-box;
display: none;
}
.spinnerContainer {
position: relative;
height: 100%;
width: 100%;
top: 30px;
left: 20px;
height: 22px;
width: 22px;
}
.sidebarIconToggle {
transition: all 0.3s;
box-sizing: border-box;
cursor: pointer;
position: relative;
z-index: 99;
height: 100%;
width: 100%;
}
.spinner {
transition: all 0.3s;
box-sizing: border-box;
position: absolute;
height: 3px;
width: 100%;
background-color: #000;
}
.horizontal {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
.diagonal.part-1 {
position: relative;
transition: all 0.3s;
box-sizing: border-box;
float: left;
}
.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
position: relative;
float: left;
margin-top: 3px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
transition: all 0.3s;
box-sizing: border-box;
opacity: 0;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(135deg);
margin-top: 8px;
}
input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
transition: all 0.3s;
box-sizing: border-box;
transform: rotate(-135deg);
margin-top: -9px;
}
<nav class="navbar navbar-light custom-navbar">
<div class="container">
<div class="spinnerContainer">
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1" ></div>
<div class="spinner horizontal" ></div>
<div class="spinner diagonal part-2" ></div>
</label>
<div id="sidebarMenu">
<ul class="sidebarMenuInner">
<li>Line 1</li>
<li>Line 2</li>
<li>Line 3</li>
<li>Line 4</li>
</ul>
</div>
</div>
</div>
<br>
</nav>