Skip to main content
formatação
Fonte Link
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" id="hidden"><hidden"></div>
   </div>
</div>

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" id="hidden"></div>
   </div>
</div>

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>

formatação
Fonte Link
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.

  • Não fechamento das chaves dos seus keyframes.

Falta de fechamernto de div no html.

  • Falta de fechamernto de div no html.

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

  • 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.

  • 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" id="hidden"></div>
   </div>
</div>

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>

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" id="hidden"></div>
   </div>
</div>

Fonte Link
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>