Clouds Over Image

.cloud-and-fog {
	overflow: hidden;
	position: relative;
	&:before,
	&:after {
		position: absolute;
		height: 100vh;
		width: 300vw;
		z-index: 2;
		content: " ";
		background-repeat: repeat-x;
		background-size: contain;
		background-position: center;
	}
	&:before {
		background: url("images/fog-1.png");
		animation: marquee 132s linear infinite;
	}
	&:after {
		background: url("images/fog-2.png");
		animation: marquee 89s linear infinite;
	}
}
@keyframes marquee {
	0% {
	transform: translate3d(0, 0, 0);
	opacity: 0;
	}
	5% {
	opacity: 1;
	}
	95% {
	opacity: 1;
	}
	100% {
	transform: translate3d(-200vw, 0, 0);
	opacity: 0;
	}
}