Animation and Transition in CSS Together Don’t Work

Question

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

The class .menu-fixed i apply it via javascript. The animation when you open the site. The animation works, but when I apply the class that contains the transition doesn’t work.

They don’t work together in 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');
        }
    });

Answer 1

I discovered the problem. The transition does not work when I determine a value auto on the property.

In my case I had a width: auto. I switched to the real value of the image and the transition worked.

I believe this is for all cases.