Animate NavBar Dropdown Menu – Bootstrap4

Animate NavBar Dropdown Menu – Bootstrap4

main.scss

.dropdown-menu {
    animation-name: Mroll;
    animation-duration: .5s;
}

@keyframes Mdown {
    from{
        opacity: 0;
        transform: translate(0,20px);
        -webkit-transform: translate(0,20px);
    }
    to{
        opacity: 1;
    }
}

@keyframes Mleft {
    from{
        opacity: 0;
        transform: translate(20px,0);
        -webkit-transform: translate(20px,0);
    }
    to{
        opacity: 1;
    }
}

@keyframes Mzoom {
    from{
        opacity: 0;
        transform: scale3d(0.2,0.2,0.2);
        -webkit-transform: scale3d(0.2,0.2,0.2);
    }
    50%{
        opacity: 1;
    }
}

@keyframes Mroll {
    from{
        opacity: 0;
        transform: translate3d(-100%,0,0) rotate3d(0,0,1,-90deg);
        -webkit-transform: translate3d(-100%,0,0) rotate3d(0,0,1,-90deg);
    }
    to{
        opacity: 1;
        transform: translate3d(0,0,0);
        -webkit-transform: translate3d(0,0,0);
    }
}

Bootstrap4 theming ep01

Bootstrap4 theming ep02