【FireFox】画像を切り変えるアニメーションで、１周目だけチラつく

Question

お世話になっております。

ローディングアニメーションで、４枚の画像を切り替えて滑らかなパラパラアニメのように表示させたいです。

現状のコードでchrome, safariでは問題ないのですが、FireFoxだけがちらつきます。

１周したらそのあとは滑らかに動くのですが、最初の１周が明らかに画像が切り替わっている風にチカチカし、滑らかに切り替わらない、という状態です。

コードは以下になります。

  <!-- ローディングアニメーション -->
  <div id="is-loading">
    <div id="loading">
      <img src="img/svg/Loading_01.svg" alt="">
      <img src="img/svg/Loading_02.svg" alt="">
      <img src="img/svg/Loading_03.svg" alt="">
      <img src="img/svg/Loading_04.svg" alt="">
    </div>
  </div><!-- is-loading -->

//アニメーションの背景
#is-loading {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #FFF;
  z-index: 999;
 }

 #loading {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 495px;
  height: 420.5px;
  margin-top: -247px;
  margin-left: -220px;  
  text-align: center;
  color: #fff;
  z-index: 1000;
  & img {
    position: absolute;
    top: 0;
    left: 0;
    animation: loading 2s linear infinite 0s forwards;
    
    &:nth-child(1){
      // animation-delay: 0.25s;
      z-index: 1001;
      visibility: visible;
    }
    &:nth-child(2){
      animation-delay: 0.5s;
      z-index: 0;
      visibility: hidden;
    }
    &:nth-child(3){
      animation-delay: 1s;
      z-index: 0;
      visibility: hidden;
    }
    &:nth-child(4){
      animation-delay: 1.5s;
      z-index: 0;
      visibility: hidden;
    }
  }
 }


 @keyframes loading {
    0% { visibility: visible; z-index: 1001; }
    12.5% { visibility: visible; z-index: 1001; }
    25% { visibility: hidden; z-index: 0; }
    100% { visibility: hidden; z-index: 0; }
  }
  

やったこと
「firefox　アニメーション　ちらつく」などで出てくる

-webkit-backface-visibility: hidden;
backface-visibility: hidden;

will-change: animation;

アニメーションに ```
-moz-

などやってみたのですが、解決せず。。。

どなたかご助言いただけませんでしょうか。
何卒よろしくお願い致します。

Comments

[hoshi-takanori]

画像を取得するのに時間がかかってるんだと思います。先読みしてみては。
https://developer.mozilla.org/ja/docs/Web/HTML/Preloading_content

[uni..]

ご回答ありがとうございます。こちら試してみたのですが、動きは直らず。。

でもpreloadというのは初めて知りました。お忙しいところ、本当にありがとうございますm(__)m