アメブロのデザイン設定でフェードインするヘッダーを設定（firefoxでカクカクする）

前提・実現したいこと

アメブロのデザイン設定でスライドショー（フェードイン）のヘッダーを設定しました。
4枚のヘッダー画像をbackground-imageとして、keyframesのアニメーションで設定しました。

発生している問題

chrome、edgeでは問題なく表示されているのですが、
firefoxでみると、切り替えがカクカクとしてうまくいきません。

macは持っていないのですが、safariの表示を友人に確認してもらい動画を送ってもらったところ、
少し動きがぎこちなかったです。

該当のソースコード

.skin-bgHeader {
　　background-image: url(https://stat.ameba.jp/user_images/20210903/15/kuweb-demo6/c3/48/p/o4000080014995766147.png); /* 背景画像1を指定 */
　　background-color:#eacdcf;
　　width:100%;
　　background-size:2000px;
　　background-repeat: no-repeat;
　　background-position: top center;
　　height:450px;
　　animation: image_anime 15s ease 1 normal; /* 15秒のアニメーションを繰り返す */
　　will-change: transform,animation,position;
　　-webkit-backface-visibility: hidden;
 　 backface-visibility: hidden;
}


@keyframes image_anime {
0% {
    background-image: url(https://stat.ameba.jp/user_images/20210903/15/kuweb-demo6/c3/48/p/o4000080014995766147.png); /* 背景画像1を指定 */
  }
20% {
    background-image: url(https://stat.ameba.jp/user_images/20210903/17/kuweb-demo6/c5/4a/p/o4000080014995819771.png); /* 背景画像0を指定 */
  }
40% {
    background-image: url(https://stat.ameba.jp/user_images/20210903/15/kuweb-demo6/bd/43/p/o4000080014995765998.png); /* 背景画像2を指定 */
  }
60% {
    background-image: url(https://stat.ameba.jp/user_images/20210903/17/kuweb-demo6/c5/4a/p/o4000080014995819771.png); /* 背景画像0を指定 */
  }
80% {
    background-image: url(https://stat.ameba.jp/user_images/20210903/15/kuweb-demo6/bd/cd/p/o4000080014995766037.png); /* 背景画像3を指定 */
  }
100% {
     background-image: url(https://stat.ameba.jp/user_images/20210903/17/kuweb-demo6/c5/4a/p/o4000080014995819771.png); /* 背景画像0を指定 */
  }
}
.skin-bgHeader [data-uranus-layout="headerInner"]>a {
   min-height: 457px;
}