<div class="map"></div>

.map {
  background-image: url(https://snazzy-maps-cdn.azureedge.net/assets/127403-no-label-bright-colors.png?v=20171101110035);
  width: 600px;
  height: 375px;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

.map:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at center,
    transparent 0%,
    transparent 10%,
    rgba(0, 0, 0, 0.8) 10.3%,
    rgba(0, 0, 0, 0.8) 100%
  );
  animation: 6s infinite random;
  background-position: 0 0;
}

@keyframes random {
  0% {
    background-position: 0 0;
  }
  30% {
    background-position: 0px -150px;
  }
  60% {
    background-position: -230px 100px;
  }
  90% {
    background-position: -30px 70px;
  }
}

// var imgWidth = 600;
// var imgHeight = 375;
// var amountMarkers = 15;

// document.addEventListener("DOMContentLoaded", event => {
  
//   var i;
//   for (i = 0; i <= 100; i += amountMarkers) {
//       insertStyleSheetRule("@keyframes random {" + i + "%" + "{ background-position: " + getRandomInt(-imgWidth, imgWidth) + "px" + " " + getRandomInt(-imgHeight, imgHeight) + "px" + "; }" + "}");
//   }
  
  
// });

// function insertStyleSheetRule(ruleText) {
//   let sheets = document.styleSheets;

//   if (sheets.length == 0) {
//     let style = document.createElement("style");
//     style.appendChild(document.createTextNode(""));
//     document.head.appendChild(style);
//   }

//   let sheet = sheets[sheets.length - 1];
//   sheet.insertRule(
//     ruleText,
//     sheet.rules ? sheet.rules.length : sheet.cssRules.length
//   );
// }

// function getRandomInt(min, max) {
//   min = Math.ceil(min);
//   max = Math.floor(max);
//   return Math.floor(Math.random() * (max - min + 1)) + min;
// }