body {
  padding: 0;
  margin: 0;
  background: url(ForestLightning.jpg);
  background-size: 100% 100%;
}

.rain {
  height: 100%;
  background: url(Lightningrain.png);
  animation: rain 0.3s linear infinite;
}

.rain:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  animation: lighting 4s linear infinite;
  opacity: 0;
}

@keyframes rain {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 20% 100%;
  }
}

@keyframes lighting {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0;
  }
  11% {
    opacity: 1;
  }
  14% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  21% {
    opacity: 1;
  }
  24% {
    opacity: 0;
  }
  104% {
    opacity: 0;
  }
}