CSS Animated Repeating Gradient

dabblet.css

/**
 * CSS Animated Repeating Gradient
 */
body {
	background: repeating-linear-gradient(-45deg,red,red 20px,blue 20px,blue 40px);
	background-size:56px 56px;/* This is unique for this background, need to find a pattern and develop a formula */
	background-position-x:0%;
	-webkit-animation:'slide' 20s infinite linear forwards;

}
@-webkit-keyframes 'slide' {
	0%{
		background-position-x:0%;
	}
	100% {
		background-position-x:100%;
	}
}

Firefox didn't work for two reasons:

• The quotes around 'slide'
• Missing support for background-position-x but we can use background-position

Here is the version that works in Safari, Chome, and Firefox:

/**
 * CSS Animated Repeating Gradient
 */
body {
    background: repeating-linear-gradient(-45deg,red,red 20px,blue 20px,blue 40px);
    background-size: 56px 56px; /* This is unique for this background, need to find a pattern and develop a formula */
    -webkit-animation: slide 20s infinite linear forwards;
    -moz-animation: slide 20s infinite linear forwards;
    animation: slide 20s infinite linear forwards;
}
@-webkit-keyframes slide {
    0% { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}
@-moz-keyframes slide {
    0% { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}
@keyframes slide {
    0% { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}

Thanks works cool!

There's a nice website by Ian Forrest that you can create animated gradients with it.
There's also an awesome code in Codepen. Cheers! :)

Thank you!

I'd replace the background property with the background-image because it can cause issues if someone will switch the order of the rules.