0

Tenho o seguinte html:

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

        <div class="col-md-6" id="empilhadeiraum">
            <img src="_img/empilhadeira.png" >
        </div>

E o seguinte CSS:

#quemsomos{
    position: relative;
    margin-top: 20px;
}

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

}

#empilhadeiraum{

    position: absolute;
    margin-left: 800px;
    animation: empilhadeiraum 2s linear 1s forwards;

}

@keyframes nossoperfil {
  0% { 
    left: 100%;
  }
  100% { 
    left: 30px;
  }


@keyframes empilhadeiraum {
  0% { 
    left: 100%;
  }
  100% { 
    left: 200px;
  }

A minha dificuldade é em por o mesmo efeito que ocorre na div "nossoperfil" na próxima div , que contém a imagem, a imagem não responde a animaçãoinserir a descrição da imagem aqui

1 Resposta 1

1

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .