JSFiddle - React, Tailwind, and code Playground

by Raman Mandal

HTML

<div id="animate-area"></div>

CSS

#animate-area	{ 
			width: 560px; 
			height: 100px; 
			background-image: url(http://assets.maharam.com/images/product_repeat_images/large/109/462170_repeat.jpg?1379039998);
			background-position: 0px 0px;
			background-repeat: repeat-x;

			animation: animatedBackground 5s linear infinite;
			-ms-animation: animatedBackground 5s linear infinite;
			-moz-animation: animatedBackground 5s linear infinite;
			-webkit-animation: animatedBackground 5s linear infinite;
		}



@keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 100% 0; }
		}
		@-webkit-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 100% 0; }
		}
		@-ms-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 100% 0; }
		}
		@-moz-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 100% 0; }
		}