Отключить анимацию css при загрузке страницы

Question

Я хочу отключить анимацию css только на странице загрузки.

Дело в том, что эта анимация css представляет собой значок меню главного меню навигации, но когда на подстраницах (там, где есть также подменю) при нажатии на подменю активируется анимация главного меню, но мне бы хотелось, чтобы она была только начните, когда щелкнет мой основной значок навигации. Я предоставил html, javascript и css.

Буду признателен за вашу поддержку в этом.

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

Добавить в JS класса, когда документ загружен:

$(window).on('load', function(){ 
    $('body').addClass('loaded') 
}); 

Тогда в CSS:

.loaded .mcwrap label:before { 
    -webkit-animation: animationOneReverse 1s ease forwards; 
    animation: animationOneReverse 1s ease forwards; 
} 

Повторите этот пример для каждой анимации, которые нуждаются в load событие