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; }
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.