Animated Grainy Texture

Pop the grain class on any container and get a cool animated grainy texture with this CSS:

.grain{
	position: relative; 
	overflow: hidden;
}

.grain::before{
	position: absolute; 
	content: '';
	background-image: url("data:image/svg+xml,%3C!-- svg: first layer --%3E%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='7.84' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	opacity: .5;
	animation: grain 8s steps(10) infinite;
	width: 300%; 
	height: 300%;
	top: -140%;
	left: -50%;
}

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -20%) }
  40% { transform:translate(-5%, 20%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 30%) }
  90% { transform:translate(-10%, 10%) }
}