Javascript em Imagem

Question

I have the following 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>

And the following 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;
  }

My difficulty is in putting the same effect that occurs in the div "nossoperfil" in the next div , which contains the image, the image does not respond to animation

Answer 1

I made an example and it’s working, it turns out that in your code there are some errors:

• Failure to lock your keys keyframes.

• Lack of closure of div in html.

• It is not very suitable to use margin with bootstrap as it may imply directly in the grid system.

• In question you put Javascript in image, but here in case there is nothing 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.stack.imgur.com/hZ6fW.png" alt="empilhadeira"/>
      </div>

      <div class="col-md-3 hidden"></div>
   </div>
</div>