Skip to main content
1 de 3
LeAndrade
  • 9mil
  • 11
  • 29
  • 52

Fiz um exemplo e está funcionando, acontece que no seu código tem alguns erros:

Não fechamento das chaves dos seus keyframes.

Falta de fechamernto de div no html.

Não é muito indicado ficar utilizando margin com bootstrap, pois pode implicar diretamente no sistema de grid.

Na pergunta vc colocou Javascript em imagem, mas, aqui no caso não tem nada de javascript.

#quemsomos{
   position: relative;
   margin-top: 20px;
}
#nossoperfil{
   border: 2px solid black;
   border-radius: 5px;
   padding: 10px;
   height: 230px;
   position: absolute;
   animation: nossoperfil 2s linear 0s forwards;

}
#empilhadeiraum{
   position: absolute;
   left: 100%;
   animation: empilhadeiraum 2s linear 1s forwards;
}

@keyframes nossoperfil {
   0% { 
      left: 100%;
   }
   100% { 
      left: 10%;
   }
}

@keyframes empilhadeiraum {
   0% { 
       left: 100%;
   }
   100% { 
       left: 50%;
   }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid" id="quemsomos">
   <div class="row">
      <div class="col-md-3" id="nossoperfil">
         <h4> Nosso Perfil </h4>
         <p> descrição sobre a empresa </p>
      </div>

      <div class="col-md-6" id="empilhadeiraum">
         <img src="https://i.sstatic.net/hZ6fW.png" alt="empilhadeira"/>
      </div>
   </div>
</div>

LeAndrade
  • 9mil
  • 11
  • 29
  • 52