DIVI menu animations

DIVI menu animations

/*Grow Underline*/

#top-menu a {
    display: block;
    position: relative;
    color: rgba(231, 13, 13, 0.89);
    text-decoration: none;
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
}
.divi-hacks-animenu-2 #top-menu li:not(.menu-item-has-children):not(.current_page_item):hover a {
		box-shadow:0px 5px 0px 0px inherit;
	}

/*Slide-in Underline*/

.divi-hacks-animenu-1 #top-menu > li:before, .divi-hacks-animenu-2 #top-menu li.current_page_item > a, .divi-hacks-animenu-2 .et-fixed-header #top-menu li.current_page_item > a, .divi-hacks-animenu-3 #top-menu > li.page_item::before {
    border-color: inherit;
    border-top-color: inherit;
    border-right-color: inherit;
    border-bottom-color: inherit;
    border-left-color: inherit;
}

.divi-hacks-animenu-1 #top-menu > li::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: 0px;
    right: 100%;
    bottom: 20%;
    height: 3px;
    transition-property: right;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
    background: transparent;
    border-bottom: 3px solid;
}

/*Current Page overline */

.divi-hacks-animenu-3 #top-menu > li.page_item::before {
    height: 5px;
    content: "";
    width: 100%;
    left: 0;
    top: -15px;
    position: absolute;
    background: transparent;
    border-top-width: 5px;
    border-top-style: solid;
    opacity: 1;
    animation: grow 0.5s;
}


/*Main Header Gradient */
#main-header:before {
    background-image: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 100%) !important;
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%) !important;
    background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0,0,0,0)', endColorstr='rgba(0,0,0,0)',GradientType=1 ) !important;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    z-index: 1;
}