@media all and (max-width: 500px) {
    #menu {
        -moz-animation-name: animatetop;
        -moz-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s;
    }

    @-moz-keyframes animatetop {
        from {top: -10px;opacity: 0;}
        to {top: 32px;opacity: 1;}
    }

    @keyframes animatetop {
        from {top: -10px;opacity: 0;}
        to {top: 32px;opacity: 1;}
    }

    .mobileToogleTopMenuBg {
        -moz-animation-name: animatetopbg;
        -moz-animation-duration: 0.4s;
        animation-name: animatetopbg;
        animation-duration: 0.4s
    }

    @-moz-keyframes animatetopbg {
        from {opacity: 0;}
        to {opacity: 1;}
    }

    @keyframes animatetopbg {
        from {opacity: 0;}
        to {opacity: 1;}
    }
}