How to reset CSS transitions on navigation

I have been trying to figure out the best way to reset my CSS transitions for my website’s navigation on mobile. The transitions only work the first time the page is loaded and after some research it seems that I need to reset them on click with Javascript or jQuery (I’m unfamiliar with both, hence why this has become an issue.) Any ideas would be appreciated. As a side note, I am using Divi for this website which is the reason for the overcomplicated class names and hierarchy.

Link to website: https://penmenwriting.com/

CSS below:

/* Mobile Navigation */


#mobile_menu1,  .opened #mobile_menu1 {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
    max-height: 100%;
    z-index: 10;
    top: 0;
    border: none;
    overflow-y: auto;
    max-width: 100%;
    float: left;
    transition: all cubic-bezier(0.5, 0, 0, 1) 800ms;
    background-color: rgba(0,0,0,1);
    background-size: cover;
    background-repeat: no-repeat;
}

.opened #mobile_menu1 {
    transform: none;
}
.opened #mobile_menu1 a {
    transform: none;
    opacity: 1;
}
.opened #mobile_menu1 .menu-item:nth-child(1) a, .closed #mobile_menu1 .menu-item:nth-last-child(1) a {
    transition-delay: 200ms;
}

.opened #mobile_menu1 .menu-item:nth-child(2) a, .closed #mobile_menu1 .menu-item:nth-last-child(2) a {
    transition-delay: 300ms;
}

.opened #mobile_menu1 .menu-item:nth-child(3) a, .closed #mobile_menu1 .menu-item:nth-last-child(3) a {
    transition-delay: 400ms;
}

.opened #mobile_menu1 .menu-item:nth-child(4) a, .closed #mobile_menu1 .menu-item:nth-last-child(4) a {
    transition-delay: 500ms;
}

.opened #mobile_menu1 .menu-item:nth-child(5) a, .closed #mobile_menu1 .menu-item:nth-last-child(5) a {
    transition-delay: 600ms;
}

.opened #mobile_menu1 .menu-item:nth-child(6) a, .closed #mobile_menu1 .menu-item:nth-last-child(6) a {
    transition-delay: 700ms;
}
.mobile_menu_bar {
    z-index: 100;
}
.mobile_nav.opened .mobile_menu_bar:before {
 content: '4d';
    color: #262626;
    transition: all ease-in-out 500ms;
    z-index: 100;
}

.mobile_nav.closed .mobile_menu_bar:before {
    transition: all ease-in-out 300ms;
}
/* Menu animations */

.closed #mobile_menu1 {
    opacity: 0;
    pointer-events: none;
    transform: translatex(-100%);
    width: 0px;
    transition-delay: 600ms;
}

/* Link animations */

#mobile_menu1 a {
    transform: translatex(-90px);
    opacity: 0;
    transition: all cubic-bezier(0.5, 0, 0, 1) 800ms;
    text-align: left;
}

/* Stop body from scrolling while in nav */
body.noscroll {
    overflow-y: hidden;
}