Skip to main content
3 de 3
formatação
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 class="col-md-3 hidden"></div>
   </div>
</div>

LeAndrade
  • 9mil
  • 11
  • 29
  • 52