How to preload images for css animation easier?

Question

css

To avoid asynchrony when starting a whole animation, I use the js preload method of graphiconium. After the images are fully loaded, I change the class of the main divac className=animate

<div id="wrapper">
 <div class="bg_main1"></div>
 <div class="bg_main2"></div>
</div>

.bg_main1 {
 opacity: 0;
 background-image: url('bg1.jpg');
}

.bg_main2 {
 opacity: 0;
 background-image: url('bg2.jpg');
}


.animate {
 .bg_main1 {
    animation: bg_main1 3s linear 0s 1;
    @keyframes bg_main1 {
       0% { opacity: 0 }
       100% { opacity: 1 }
    }
 }
 .bg_main2 {
    animation: bg_main2 3s linear 0s 1;
    @keyframes bg_main2 {
       0% { opacity: 0 }
       100% { opacity: 1 }
    }
 }
}

So far, this is the only option that works (tested at 2G Internet speeds).
Question: is there a shorter and easier option?