slide down menu effect with scss

slideDownMenuEffect.css

@keyframes slideInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-sticked {
    padding-top: 135px;

    header#navbar {
        position: fixed;
        width: 100%;
        z-index: 100;
        top: -2px;
        animation-name: slideInDown;
        animation-iteration-count: 1;
        animation-duration: 0.5s;
        animation-delay: 0s;
        animation-timing-function: ease;
        animation-fill-mode: both;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        box-shadow: 0px 1px 5px 1px rgba(color('black'), .2);

        .navbar-top-wrapper {
            display: none;
        }

        .navbar-main-wrapper {
            height: 70px;

            @include media-breakpoint-down(sm) {
                .navbar-main {
                    display: none;
                }
            }
        }
    }
}