.containerBatman {
  background: #000;
  margin: 0 auto;
}

canvas {
  width: 100vw;
  height: 100vh;
  position: relative;
  z-index: 200;
  margin: 0 auto;
}

.batman {
  background: #000 url(https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-56611.jpg) 50% 50% no-repeat;
  width: 100vw;
  height: 100vh;
  position: absolute;
  margin-right: -570px;
  right:50%;
  z-index: 100;
}

.containerBatman .batman {
  transition: ease-out 250ms;
  -webkit-animation: lightning 6000ms infinite;
          animation: lightning 6000ms infinite;
}

@-webkit-keyframes lightning {
  0%,100% {
    -webkit-filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
            filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
  }
  8% {
    -webkit-filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
            filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
  }
  9.5% {
    -webkit-filter: opacity(1) grayscale(0%) contrast(1) brightness(1);
            filter: opacity(1) grayscale(0%) contrast(1) brightness(1);
  }
  10% {
    -webkit-filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
            filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
  }
  73% {
    -webkit-filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
            filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
  }
  75% {
    -webkit-filter: opacity(1) grayscale(0%) contrast(1) brightness(1);
            filter: opacity(1) grayscale(0%) contrast(1) brightness(1);
  }
  77% {
    -webkit-filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
            filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
  }
  80% {
    -webkit-filter: opacity(1) grayscale(0%) contrast(1) brightness(1);
            filter: opacity(1) grayscale(0%) contrast(1) brightness(1);
  }
  90% {
    -webkit-filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
            filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
  }
}

@keyframes lightning {
  0%,100% {
    -webkit-filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
            filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
  }
  8% {
    -webkit-filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
            filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
  }
  9.5% {
    -webkit-filter: opacity(1) grayscale(0%) contrast(1) brightness(1);
            filter: opacity(1) grayscale(0%) contrast(1) brightness(1);
  }
  10% {
    -webkit-filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
            filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
  }
  73% {
    -webkit-filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
            filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
  }
  75% {
    -webkit-filter: opacity(1) grayscale(0%) contrast(1) brightness(1);
            filter: opacity(1) grayscale(0%) contrast(1) brightness(1);
  }
  77% {
    -webkit-filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
            filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
  }
  80% {
    -webkit-filter: opacity(1) grayscale(0%) contrast(1) brightness(1);
            filter: opacity(1) grayscale(0%) contrast(1) brightness(1);
  }
  90% {
    -webkit-filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
            filter: opacity(0.5) grayscale(80%) contrast(4) brightness(0.2);
  }
}