I need to animate the background-position-x, but there is a
background-position: 0 0 !important;I have searched online, but it seems adding !important to my animate function is not an option.
//Update. Alternatively, is there a way to achieve this with pure CSS?
Thank you!
jQuery(document).ready(function($) {
$('.section').animate({
'background-position-x': '100%'
}, 100000, 'linear');
});
//Update 2. It appears that the following solution actually works:
@-webkit-keyframes animatedBackground {
from {
background-position: 0px 0px; }
to {
background-position: 100% 0px; }
}
.section {
-webkit-animation: animatedBackground 200s linear infinite;
-moz-animation: animatedBackground 200s linear infinite;
animation: animatedBackground 200s linear infinite;
}
//Update 3. However, it seems that Firefox still overrides with the !important declaration and including !important inside the keyframes block has no effect. Any suggestions? Thank you!