Beating Heart Animation Interfering With Random Background Cycling

Separately, they both work perfectly. The css-script for a beating heart does what it should do: feature a beating heart (or rather, image of a heart). The random background cycling script chooses a new background every 10 seconds.

However, put together, they still work, only every 10 seconds, the screen blinks black (the background cycler does not feature a transition on its own), both the background and the heart (and everything else on screen) blink out of existence for a split-second and then everything is back again.

I've managed to determine, despite knowing absolutely nothing about CSS and JS except for what little I've learned today through tinkering with the scripts, that if I remove the variable "infinite", the heart will beat only once after each transition and the blinking glitch will not occur, so it has something to do with that.

What I want is this: A heartbeat animation that's infinite with a background that cycles through a set number of backgrounds every X seconds without any kind of transitions or blinking effects.

The heartbeat CSS-script:

Code:

The background cycler (html-file):

Code:
The background cycler (js-file):

Code: