Stop Javascript from overriding/ignoring custom CSS (Harlowe)

Hello everyone,

I'm really close to my deadline for finishing my Twine story and I ran into an annoying issue with preloading images with Javascript. I got this handy piece of code from here.

function preloader() {
	if (document.images) {
		var img1 = new Image();
		var img2 = new Image();
		var img3 = new Image();

		img1.src = "http://domain.tld/path/to/image-001.gif";
		img2.src = "http://domain.tld/path/to/image-002.gif";
		img3.src = "http://domain.tld/path/to/image-003.gif";
	}
}
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
			func();
		}
	}
}
addLoadEvent(preloader);

The issue with this is that although it now does preload the images fine, it seems to override/ignore the parts of my custom css that make some of my images appear slowly.

Being:

html.example
				{
		background-image: url("http://exampleurl.jpg");
	background-repeat:no-repeat;
	background-size:contain;	
	background-position: center;
	background-color: Black;
	-webkit-animation: appear 2s;
	animation: appear 2s;
				}

They now just pop up instantly. Is there any way to solve this? Maybe by using the CSS way of preloading proposed by the website to work? (I can't get it to work.)

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

Hope any of you can make sense of this. Thank in advance.