.js-scroll {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
    transition: all .3s;
  }
  
  .js-scroll.ativo  {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    
  }

@keyframes animarDireitaEsquerda {
    from {
        opacity: 0;
        transform: translateX(100px);
    }

    to {
        opacity: 1;
        transform: translateX(0px); 
    }
}

@keyframes animarEsquerdaDireita {
    from {
        opacity: 0;
        transform: translateX(-100px);
    }

    to {
        opacity: 1;
        transform: translateX(0px); 
    }
}

@keyframes animarCimaBaixo {
    from {
        opacity: 0;
        transform: translateY(-200px);
    }

    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes animarBaixoCima {
    0%{
        opacity: 0;
        transform: translateY(400px);
    }

    100% {
        opacity: 1;
        transform: translateY(0px);
        transition: all .3s;
    }
}

.js-scroll.ativo .texto-home,
.js-scroll.ativo .texto-home p,
.js-scroll.ativo .icones-sociais,
.js-scroll.ativo.sobre,
.js-scroll.ativo.habilidades h1,
.js-scroll.ativo .habilidades-containerTecnologias::before,
.js-scroll.ativo.projetosDestaque,
.js-scroll.ativo .titulo-formacao-academica,
.js-scroll.ativo .formacao-academica-linesx::before,
.js-scroll.ativo .formacao-academica-lines,
.js-scroll.ativo .formacao-academica-container-certificados,
.js-scroll.ativo.todosProjetos,
.js-scroll.ativo.container-card-projeto-completo, 
.js-scroll.ativo.contato {
    animation: animarCimaBaixo 1s forwards;
    animation-timing-function: cubic-bezier(0.25, 1.5, 0.5, 1);
}

.js-scroll.ativo .habilidades-containerTecnologias::after,
.js-scroll.ativo .habilidades-containerTecnologias,
.js-scroll.ativo .formacao-academica-lines::before,
.js-scroll.ativo .formacao-academica-cards {
    animation: animarBaixoCima 1s forwards;
    animation-timing-function: cubic-bezier(0.25, 1.5, 0.5, 1);
}

.js-scroll.ativo .home-foto {
    animation: animarDireitaEsquerda 1s forwards;
    animation-timing-function: cubic-bezier(0.25, 1.5, 0.5, 1);
}

.js-scroll.ativo .font-1-h1-b::before,
.js-scroll.ativo .formacao-academica-cards::before,
.js-scroll.ativo .formacao-academica-cards::after {
    animation: animarEsquerdaDireita 1s forwards;
    animation-timing-function: cubic-bezier(0.25, 1.5, 0.5, 1);
}