CSS3 Pixelated Background Scroll (Code Snippet)

<div class="pixelated-scroll"></div>

html, body {
  	margin: 0;
  	width: 100%;
  	height: 100%;
	background-color: #455281;
}
.pixelated-scroll {
  	width: 100%;
  	height: 100%;
  	image-rendering: pixelated;
  	background-image: url(https://codeshack.io/web/img/uploads/pixelated-buildings.png);
  	background-size: 50%;
  	background-repeat: repeat-x;
  	background-position: left bottom;
  	border-bottom: 100px solid black;
  	box-sizing: border-box;
    animation: slide 10s linear infinite;
}
@keyframes slide {
  	from { background-position: left bottom; }
  	to { background-position: 100% bottom; }
}

CSS3 Pixelated Background Scroll

Share Code Snippet