JSFiddle - React, Tailwind, and code Playground

by hmdadou

HTML

<body>
</body>

CSS

body {
    background: linear-gradient(to right, #f00, #0f0, #00f);
    background-size: 600% 100%;
    -webkit-animation: MoveBG 20s ease infinite;
    -moz-animation: MoveBG 20s ease infinite;
    -o-animation: MoveBG 20s ease infinite;
    animation: MoveBG 20s ease infinite;
}

@-webkit-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}

@-moz-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}
@-o-keyframes MoveBG {
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}
@keyframes MoveBG { 
	0%{background-position:0 0}
	50%{background-position:100% 0}
	100%{background-position:0 0}
}

JavaScript

// the animation duration should change to 2s, but it still animates at 20s
var animation  = 'MoveBG 500s ease infinite';
$('body').css('animation', animation);
$('body').css('animation-duration', '100s');

// it even says that it is animate at 2s
//alert($('body').css('animation-duration'));