Making Animations Wait

load-animation-play-state.js

// wait for document
document.body.className += " js-loading";
window.addEventListener("load", removeLoadingClass, false);
function removeLoadingClass() {
  document.body.className = document.body.className.replace("js-loading","");
}

// wait for image
// Adjust the "querySelector" value to target your image
var img = document.querySelector("img");
document.body.className += " js-loading";
img.addEventListener("load", removeLoadingClass);
function removeLoadingClass() {
  document.body.className = document.body.className.replace("js-loading","");
}

/*
.js-loading *,
.js-loading *:before,
.js-loading *:after {
  animation-play-state: paused !important;
}
*/

// ref: https://css-tricks.com/making-animations-wait/