JSFiddle - React, Tailwind, and code Playground
by Artem Borovikov
HTML
<div class="overlay">
12345
</div>
CSS
@-moz-keyframes movingbg {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
@-webkit-keyframes movingbg {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
@keyframes movingbg {
from { background-position: 200% 0, 0 0; }
to { background-position: -100% 0, 0 0; }
}
body{
background: url(http://loremflickr.com/150/150) repeat 0 0 transparent;
-moz-animation: movingbg 20s linear 0s infinite;
-webkit-animation: movingbg 20s linear 0s infinite;
animation: movingbg 20s linear 0s infinite;
}
.overlay{
position: fixed;
font: 300 14px/18px Helvetica, Arial, sans-serif;
color: #FFF;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
}