How can I make the body change background image only when the animation above it finishes?

Question

'''document.querySelector("#op").style.animation = "fadeIn 2s";
document.querySelector("body").style.backgroundImage = "url("+ url +")";
document.querySelector("#op").style.animation = "fadeOut 2s";'''

Answer 1

Set a timeout of 2 seconds:
setTimeout ( function (){ }, 2000)

Or use animationend event:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/animationend_event