/*animacion realizando operacion*/
.animacion-realizando-operacion {
  width: 100px;
  height: 50px;
  position: relative;
  -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
  -webkit-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {left:-100px; top:0px;}
  20%  {left:0px; top:0px;}
  40%  {left:100px; top:0px;}
  60%  {left:200px; top:0px;}
  80%  {left:300px; top:0px;}
  100% {left:400px; top:0px;}
}

/* Standard syntax */
@keyframes example {
  0%   {left:-100px; top:0px;}
  20%  {left:0px; top:0px;}
  40%  {left:100px; top:0px;}
  60%  {left:200px; top:0px;}
  80%  {left:300px; top:0px;}
  100% {left:400px; top:0px;}
}
/*fin animacion realizando operacion*/

/*animacion rotate-infinite*/
.animacion-rotate-infinite {
  animation: rotate-infinite 5s infinite;
}

@keyframes rotate-infinite {
	0% {transform: scale(1, 1);}
	50% {transform: scale(1.5, 1.5) rotate(360deg) ;}
  	100% {transform: scale(1, 1);}
}
/*fin animacion robot*/

/*animacion fade in*/
.animacion-fade-in {
  animation: fade-in ease 3s;
}

@keyframes fade-in {
	0% {opacity: 0;}
	100% {opacity: 1;}
}
/*fin animacion fade in*/