Загрузка и синхронный старт css анимации

Чтобы избежать асинхрона при старте цельной анимации, я использую метод предзагрузки графония силами js. После полной загрузки картинок меняю класс у основного дивака 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 }
      }
   }
}

Пока что это единственный вариант который работает (проверял на 2G скоростях интернета).

Вопрос: есть ли вариант короче и проще?