Skip to main content
1 de 2
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104

Animation e Transition no CSS Juntos Não Funcionam

Estou escrevendo o código abaixo e não está funcionando a parte do transition.

A classe .menu-fixed eu aplico via javascript. A animação quando abre o site. A animação funciona, mas quando eu aplico a classe que contém o transition não funciona.

Eles não funcionam juntos num mesmo elemento ?

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');
        }
    });
Diego Souza
  • 16,7mil
  • 4
  • 36
  • 104