JavaScript in Image

Question

JavaScript in Image

Navigation

#1 by (1 votes)

0

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 for the same effect that occurs in the div "ourprofil" in the next div, which contains the image, the image does not respond to the animation

html css

asked by anonymous 08.07.2018 / 06:13

1 answer

How to calculate difference between dates using the time.h library Convert json to array using pure javascript

score 1 · Answer 1

I made an example and it works, it happens that your code has some errors:

Do not close the keys of your keyframes .



Missing div in html.



It is not very good to use margin with bootstrap because it can directly involve the grid system.



In the question you put Javascript in the image,

#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>