Animation and Transition in CSS Together Do not Run

I am writing the code below and the part of transition is not working.

The class .menu-fixed I apply via javascript. The animation when you open the site. The animation works, but when I apply the class containing transition it does not work.

Do not they work together on the same element?

CSS

            &.fundo-menu{
                position: absolute;
                left: 0;
                right: 0;
                top: -500px;
                opacity: 0;
                margin: auto;
                width: auto;
                animation-name: LogoTorcaneDesce;
                animation-timing-function: ease;
                animation-duration: 2s;
                animation-delay: 0.2s;
                animation-fill-mode: forwards;
                transition: all 0.8s ease;
                &.menu-fixed{
                    width: 230px;
                }
            }

JS

    var MenuHeaderBox = $("header#header, nav.menu, .fundo-menu, .logo-menu");
    $(window).scroll(function(){
        if($(this).scrollTop() > 300){
            MenuHeaderBox.addClass('menu-fixed');
        }else{
            MenuHeaderBox.removeClass('menu-fixed');
        }
    });