Board Thread:Support Requests - Designing Your Wiki/@comment-4356266-20170311100603

I'm currently preparing a script for April Fools. Part of it involves the background sliding and zooming. The keyframes are as follows:

@keyframes bgScrollLeft { from { background-position: center right; }	to { background-position: center left; } } @keyframes bgScrollRight { from { background-position: center left; }	to { background-position: center right; } } @keyframes bgScrollUp { from { background-position: bottom center; }	to { background-position: top center; } } @keyframes bgScrollDown { from { background-position: bottom center; }	to { background-position: top center; } } @keyframes bgZoomIn { from { background-size: cover; }	to { background-size: 130%; } } @keyframes bgZoomOut { from { background-size: 130% auto; }	to { background-size: 100% auto; } } This would be inserted by the script into the body. Then a function would apply a random background and random animation: $('body.skin-oasis').css({			"background-image": 'url('+bgList[Math.floor(Math.random*bgList.length)] + ')',			"background-size" : 'cover',			"animation" : '3.84s ' + keyframeList[Math.floor(Math.random*keyframeList.length)] + ''		})

However, testing the function doesn't animate the background. I've tested the CSS manually with PortableCSSPad, tweaking the selectors (from .body to .body.skin-oasis and even adding .animated to both the body and the css selector to override the default styles), adding !important to the animation property and the keyframe, unsetting background-size property; all of this didn't work.

I'm at a complete loss. I need other sets of eyes to help point out any mistakes, if any, otherwise to suggest me a way that works, preferably without JS. Help much appreciated.

BTW, I'm on FF51.  