Check out my creative solution using just one element:
<div class="test">
</div>
No need for images, only cool gradients in the CSS:
.test{
position: absolute;
width: 400px;
height: 400px;
left: 20px;
top: 20px;
border: solid 2px blue;
}
.test:before {
content: "";
position: absolute;
width: 50%;
height: 100%;
left: 0px;
background-image: repeating-linear-gradient(135deg, white 10px, black 20px),
repeating-linear-gradient(45deg, white 10px, blue 20px);
background-size: 120% 50%;
background-position: top left, bottom left;
background-repeat: no-repeat;
-webkit-animation: move 1s infinite linear;
}
.test:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
right: 0px;
background-image: repeating-linear-gradient(45deg, white 10px, green 20px),
repeating-linear-gradient(135deg, white 10px, yellow 20px);
background-size: 120% 50%;
background-position: top left, bottom left;
background-repeat: no-repeat;
-webkit-animation: move 1s infinite linear reverse;
}
@-webkit-keyframes move {
0% { background-position: -40px 0%, -40px 100%;}
100% { background-position: 0px 0%, 0% 100%;}
}
For a live demonstration, check out this webkit demo.
To make it compatible with older browsers, you may need to provide equivalents for CSS3 syntax.
I've color-coded the elements for clarity and included an updated version that works on smaller div sizes:
Updated demo
The background size has been adjusted to cover the element adequately:
.test:before,
.test:after {
background-size: 120px 50%;
}
Enjoy experimenting with this fun CSS animation!