iOSでCSSアニメーションが動かない

初心者です。

HTMLとCSSとJavaScriptを使って、スクロールで対象要素の座標に来た際に、
要素がスライドで流れてくるアニメーションを作りたいのですが、
何故かiOSではアニメーションが動かず、
少しスクロールすると、画面がガタッ!と変に動くような挙動をします。

safari・chromeともに同様の動きなのですが、
なんの設定が必要、もしくは一般的にどのように記述すればよいのでしょう。

アニメーション部のみ、別のCSSファイルにて設定し、
jQueryで最後に読み込むと良いという情報を見たので、それも試しましたが
うまくいきませんでした。
参考にしたサイト
https://makoblog.net/wordpress/2020-10-331.html

HTML
1    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
2    略
3        <div class="right-to-left">aaaaaaaaaaaaaaa</div>
4    略
5    <script>
6      $(function () {
7        var style =
8          '<link rel="stylesheet" type="text/css" media="all" href="./anime.css" />';
9        $("head link:last").after(style);
10      });
11    </script>

css
1/* ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ */
2/* anime.css */
3.is-animated {
4  opacity: 1;
5  animation: slideIna 3s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
6  perspective: 1000;
7}
8
9@keyframes slideIna {
10  0% {
11    transform: translateX(180px);
12    opacity: 0;
13    -webkit-transition: -webkit-transform all 3s;
14  }
15  100% {
16    transform: translateX(0);
17  }
18  40%,
19  100% {
20    opacity: 1;
21    -webkit-transition: -webkit-transform all 3s;
22  }
23}
24
25/* スライド */
26.right-to-left {
27  display: block;
28  opacity: 1;
29  animation: right-to-left 3s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
30  perspective: 1000;
31}
32
33@keyframes right-to-left {
34  0% {
35    transform: translateX(180px);
36    opacity: 0;
37  }
38  100% {
39    transform: translateX(0);
40  }
41  40%,
42  100% {
43    opacity: 1;
44  }
45}

JavaScript
1let rightTargets = document.querySelectorAll(".right"); //アニメーションさせたい要素
2let leftTargets = document.querySelectorAll(".left"); //アニメーションさせたい要素
3let offset = 10; //アニメーションタイミング
4
5window.addEventListener("scroll", function () {
6  //スクロールしたとき
7
8  //スクロール量を取得
9  var scroll = window.scrollY;
10  //画面の高さを取得
11  var h = window.innerHeight;
12
13  for (let target of rightTargets) {
14    var pos = target.getBoundingClientRect().top + scroll; //アニメーションさせたい要素の位置を取得
15    //スクロール量 > アニメーションさせたい要素の位置
16    if (scroll > pos - h + offset) {
17      // クラスを付与し、アニメーションを実行
18      target.classList.add("right-to-left");
19      //   target.classList.add("is-animated");
20    }
21  }
22});
23