 

.div-all-animas {
  position: absolute;
  margin: auto;  
  bottom: 25%;
  left: 50%;
}




/*ANIMAÇÃO DAS DIVS */

/* Giro 360*/
.div-vector { 
  position: absolute;
  animation-name: vector;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  
}

@keyframes vector {
  0%   { left:100px; top:-180px;}

  5%   { left:100px; top:-180px;}
   
  60%  { left:100px; top:-180px;}
 
  100% { left:100px; top:-180px;}
}



/* Circulo com Linhas*/
.div-lines{ 
  position: absolute;
  animation-name: lines;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  
}

@keyframes lines {
  0%   { left:-30px; top:-155px;}
   
  50%  { left:-30px; top:-150px;}
 
  100% { left:-30px; top:-155px;}
}


/* Robot Subindo e Descendo*/
.div-robot{ 
  position: absolute;
  animation-name: robot;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  
}

@keyframes robot {
  0%   { left:0px; top:-115px;}
   
  50%  { left:0px; top:-115px;}
 
  100% { left:0px; top:-115px;}
}


/* Balão de Fala */
.div-baloon{ 
  position: absolute;
  animation-name: baloon;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  
}

@keyframes baloon{
  0%   { left:150px; top:20px; width: 25px; height:17px;opacity:0;}
  10%   { left:160px; top:-20px; width: 80px; height:55px;opacity:1;}
  13%   { left:160px; top:-17px; width: 76px; height:52px;}
  93%   { left:160px; top:-17px; width: 76px; height:52px;opacity:1;}
  100%   { left:150px; top:20px; width: 25px; height:17px; opacity:0;}
}


/* Digitação do Balão de Fala */
.div-digitar{ 
  position: absolute;
  animation-name: digitar;
  animation-duration: 7s;
  animation-iteration-count: infinite;
  
}

@keyframes digitar{
  0%   { left:170px; top:-5px; opacity:0; }
  10%   { left:170px;  opacity:0; }
  20%   { left:180px;  opacity:1; }
  87%   { left:180px; opacity:1; }
  93% { left:190px;  opacity:0;}
  100% { left:190px; top:-5px; opacity:0;}

}


