Animated background

only by using this static image:

and CSS3 animation:

@keyframes animateBackground {
	0%   {background-position: 1em 0;}
	100% {background-position:  0   0;}
}

.animate-image {
	background-image: url("gradient.png");
	background-position: 1em 0;
	background-repeat: repeat;
	background-size: 1em 1px;

	animation-name: animateBackground;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
		
Animated background (gray)
Animated background (green)
Animated background (blue)
Animated background (red)

only by using CSS3 gradient:

.animate-gradient {
@keyframes animateBackground {
	0%   {background-position: 1em 0;}
	100% {background-position:  0   0;}
}
	background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
	background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
	background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
	background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
	background-position: 1em 0;
	background-repeat: repeat;
	background-size: 1em 1em;

	animation-name: animateBackground;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}
		

Note that all above animations use the same background definition, only the background color is different.