JSFiddle - React, Tailwind, and code Playground

by piotku

HTML

<div id="wrapper">
<div id="content">Foreground content</div>
</div>

CSS

@-webkit-keyframes MOVE-BG {
	0% {
		//background-position: 0% 0%
    transform: translate(0%, 0%);
    -webkit-transform: translate(0%, 0%);
	}
	50% { 
		//background-position: 187% 0%
    transform: translate(-250px, 0%);
    -webkit-transform: translate(-250px, 0%);
	}
	100% {
		//background-position: 0% 0%
    transform: translate(0%, 0%);
    -webkit-transform: translate(0%, 0%);
	}
}

#wrapper {
	width: 300px;
	height: 368px;
  overflow: hidden;  
}
#content {
	width: 550px;
  height: 368px;
	background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
    text-align: center;
    font-size: 26px;
    color: #000;
	
	-webkit-animation-name: MOVE-BG;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}