JSFiddle - React, Tailwind, and code Playground
HTML
<div class="outer">
<div class="inner">According to a new report from AnandTech, Samsung might be fibbing its way to more favorable Galaxy S4 benchmarks. Has your device suddenly come to a crawl? Of course it hasn’t; benchmarks shouldn’t change your perception of a flagship as powerful as the S4. Still, it’s embarrassing that Samsung would resort to such technical tactics, like allegedly using code dubbed “BenchmarkBooster.” Yes, your device takes steroids.</div>
</div>
CSS
html, body {
height: 100%;
margin: 0;
}
.outer {
height:100%;
overflow: hidden;
}
.inner {
height:200%;
width:100%;
-webkit-animation:mymove 5s linear infinite;
/* Safari and Chrome */
animation:mymove 5s linear infinite;
background-image: url('http://static1.360vrs.com/pano-content/judith-stone-at-sunset-east-farndon/640px-360-panorama.jpg');
background-size: 100% 50%;
}
@-webkit-keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}
@keyframes mymove {
from {
background-position: 0% 0%;
}
to {
background-position: 0% -100%;
}
}