.grain {
  height: 100%h;
  background-color: transparent;
  position: relative;
  z-index: 300;
  pointer-events: none;
}

.grain:after {
  animation: grain 8s steps(10) infinite;
  background-image: url("https://assets.website-files.com/5dff182dc3faab4c98b08388/5dff21c5e65e0610a8d38b86_noisy-texture-100x100-o5-d10-c-FFFFFA-t1.png");
  content: "";
  height: 300%;
  left: -50%;
  position: fixed;
  top: -100%;
  width: 300%;
}

@keyframes grain {
  0%, 100% {transform: translate(0,0);}
  10% {transform: translate(-5%,-10%);}
  30% {transform: translate(3%,-15%);}
  50% {transform: translate(12%,9%);}
  70% {transform: translate(9%,4%);}
  90% {transform: translate(-1%,7%);}
}