Disable css animation on page load - css

Question

I want to disable css animation on page load only.
The thing is that this css animation is the menu icon of main navigation menu, but when on subpages (where there also is a submenu present) on click on submenu the main menu animation activates - but i would like it to only start when my main navigation icon is clicked. I provided html, javascript and css involved.
I would appreciate your support in this.
html:
<div class="mcwrap">
<input id="click" name="exit" type="checkbox">
<label for="click"><span class="burger"></span></label>
</div>
javascript:
$('.mcwrap label').on('click', function(){
(!$('#click').prop('checked')) ? setTimeout(function(){opensLeft()}, 200) : setTimeout(function(){closesLeft()}, 200);
});
function opensLeft() {
$("#sl").addClass('visible')
$("#swipe").addClass('isOpenLeft');
}
function closesLeft() {
$("#sl").removeClass('visible')
$("#swipe").removeClass('isOpenLeft');
}
css:
#sl.visible, #sr.visible {
display: block;
}
.mcwrap {
padding-top: 9px;
}
.mcwrap input {
display: none;
}
.mcwrap label {
position: relative;
width: 20px;
height: 30px;
display: block;
cursor: pointer;
background: transparent;
}
/* Exit Icon */
.mcwrap label:before,
.mcwrap input:checked + label:before {
content: '';
position: absolute;
top: 50%;
margin-top: -2px;
width: 30px;
height: 4px;
border-radius: 2px;
background: #fafafa;
}
.mcwrap label:before {
-webkit-animation: animationOneReverse 1s ease forwards;
animation: animationOneReverse 1s ease forwards;
}
#-webkit-keyframes animationOneReverse {
0% {
-webkit-transform: rotate(315deg);
}
25% {
-webkit-transform: rotate(360deg);
}
50%,
100% {
-webkit-transform: rotate(0deg);
}
}
#keyframes animationOneReverse {
0% {
transform: rotate(315deg);
}
25% {
transform: rotate(360deg);
}
50%,
100% {
transform: rotate(0deg);
}
}
.mcwrap input:checked + label:before {
-webkit-animation: animationOne 1s ease forwards;
animation: animationOne 1s ease forwards;
}
#-webkit-keyframes animationOne {
0%,
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(360deg);
}
100% {
-webkit-transform: rotate(315deg);
}
}
#keyframes animationOne {
0%,
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(315deg);
}
}
.mcwrap label:after,
.mcwrap input:checked + label:after {
content: '';
position: absolute;
top: 50%;
margin-top: -2px;
width: 30px;
height: 4px;
border-radius: 2px;
background: #fafafa;
}
.mcwrap label:after {
-webkit-animation: animationTwoReverse 1s ease forwards;
animation: animationTwoReverse 1 s ease forwards;
}
#-webkit-keyframes animationTwoReverse {
0% {
-webkit-transform: rotate(405deg);
}
25% {
-webkit-transform: rotate(450deg);
}
50%,
100% {
-webkit-transform: rotate(0deg);
}
}
#keyframes animationTwoReverse {
0% {
transform: rotate(405deg);
}
25% {
transform: rotate(450deg);
}
50%,
100% {
transform: rotate(0deg);
}
}
.mcwrap input:checked + label:after {
-webkit-animation: animationTwo 1s ease forwards;
animation: animationTwo 1s ease forwards;
}
#-webkit-keyframes animationTwo {
0%,
50% {
-webkit-transform: rotate(0deg);
}
75% {
-webkit-transform: rotate(450deg);
}
100% {
-webkit-transform: rotate(405deg);
}
}
#keyframes animationTwo {
0%,
50% {
transform: rotate(0deg);
}
75% {
transform: rotate(450deg);
}
100% {
transform: rotate(405deg);
}
}
/* Burger Icon */
.mcwrap label .burger:before {
content: '';
position: absolute;
top: 4px;
width: 30px;
height: 4px;
border-radius: 2px;
background: #fafafa;
-webkit-animation: animationBurgerTopReverse 1s ease forwards;
animation: animationBurgerTopReverse 1s ease forwards;
}
#-webkit-keyframes animationBurgerTopReverse {
0%,
50% {
-webkit-transform: translateY(12px);
opacity: 0;
}
51% {
-webkit-transform: translateY(12px);
opacity: 1;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
#keyframes animationBurgerTopReverse {
0%,
50% {
transform: translateY(12px);
opacity: 0;
}
51% {
transform: translateY(12px);
opacity: 1;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.mcwrap input:checked + label .burger:before {
-webkit-animation: animationBurgerTop 1s ease forwards;
animation: animationBurgerTop 1s ease forwards;
}
#-webkit-keyframes animationBurgerTop {
0% {
-webkit-transform: translateY(0px);
opacity: 1;
}
50% {
-webkit-transform: translateY(12px);
opacity: 1;
}
51%,
100% {
-webkit-transform: translateY(12px);
opacity: 0;
}
}
#keyframes animationBurgerTop {
0% {
transform: translateY(0px);
opacity: 1;
}
50% {
transform: translateY(12px);
opacity: 1;
}
51%,
100% {
transform: translateY(12px);
opacity: 0;
}
}
.mcwrap label .burger:after {
content: '';
position: absolute;
bottom: 4px;
width: 30px;
height: 4px;
border-radius: 2px;
background: #fafafa;
-webkit-animation: animationBurgerBottomReverse 1s ease forwards;
animation: animationBurgerBottomReverse 1s ease forwards;
}
#-webkit-keyframes animationBurgerBottomReverse {
0%,
50% {
-webkit-transform: translateY(-12px);
opacity: 0;
}
51% {
-webkit-transform: translateY(-12px);
opacity: 1;
}
100% {
-webkit-transform: translateY(0px);
opacity: 1;
}
}
#keyframes animationBurgerBottomReverse {
0%,
50% {
transform: translateY(-12px);
opacity: 0;
}
51% {
transform: translateY(-12px);
opacity: 1;
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
.mcwrap input:checked + label .burger:after {
-webkit-animation: animationBurgerBottom 1s ease forwards;
animation: animationBurgerBottom 1s ease forwards;
}
#-webkit-keyframes animationBurgerBottom {
0% {
-webkit-transform: translateY(0px);
opacity: 1;
}
50% {
-webkit-transform: translateY(-12px);
opacity: 1;
}
51%,
100% {
-webkit-transform: translateY(-12px);
opacity: 0;
}
}
#keyframes animationBurgerBottom {
0% {
transform: translateY(0px);
opacity: 1;
}
50% {
transform: translateY(-12px);
opacity: 1;
}
51%,
100% {
transform: translateY(-12px);
opacity: 0;
}
}

Answer 1

Add in JS a class when document is loaded:
$(window).on('load', function(){
$('body').addClass('loaded')
});
Then in CSS:
.loaded .mcwrap label:before {
-webkit-animation: animationOneReverse 1s ease forwards;
animation: animationOneReverse 1s ease forwards;
}
Repeat this example for every animation that need the load event