/*
  feel free to change $rand,
  it changes the amplitude 
*/
@-webkit-keyframes batman {
  0% {
    transform: translate(3893%, -138%);
    opacity: 0;
  }
  30%, 60% {
    transform: translate(0);
    opacity: 1;
  }
  100% {
    transform: translate(-4024%, -1345%);
    opacity: 0;
  }
}
@-moz-keyframes batman {
  0% {
    transform: translate(193%, 360%);
    opacity: 0;
  }
  30%, 60% {
    transform: translate(0);
    opacity: 1;
  }
  100% {
    transform: translate(941%, 87%);
    opacity: 0;
  }
}
@-o-keyframes batman {
  0% {
    transform: translate(-3086%, -4498%);
    opacity: 0;
  }
  30%, 60% {
    transform: translate(0);
    opacity: 1;
  }
  100% {
    transform: translate(1667%, -3725%);
    opacity: 0;
  }
}
@keyframes batman {
  0% {
    transform: translate(-4988%, 2877%);
    opacity: 0;
  }
  30%, 60% {
    transform: translate(0);
    opacity: 1;
  }
  100% {
    transform: translate(-1917.0%, -2354%);
    opacity: 0;
  }
}
#batman {
  margin: 0;
  overflow: hidden;
}
#batman svg {
  position:relative ;
  width: 100%;
  height: 500px;
  background: #000;
  background: -webkit-radial-gradient(#01579B, #000);
  background: -o-radial-gradient(#01579B, #000);
  background: -moz-radial-gradient(#01579B, #000);
  background: radial-gradient(#01579b, #000000);
}
#batman svg g {
  filter: url(#edge-cleaner);
}
#batman svg polygon {
  opacity: 0;
  -webkit-animation: batman 6s infinite;
  -moz-animation: batman 6s infinite;
  -o-animation: batman 6s infinite;
  animation: batman 6s infinite;
}