Vue3で組んだページのanimationがiPhoneで動きません

実現したいこと

特定の画像が連続的に流れるアニメーションを実現したいです

発生している問題・分からないこと

iPhoneのみでアニメーションが再生されません。
解決方法やこの事象に関係するiPhoneの特性などご教示いただけますと幸いです！

エラーメッセージ

error

1エラーメッセージはありません。

該当のソースコード

Vue3

1<script setup lang="ts"></script> 2 3<template> 4 <div class="animation"> 5 <div class="animation__box"> 6 <img src="/img/train.png" class="train1"> 7 <img src="/img/train.png" class="train2"> 8 </div> 9 </div> 10</template> 11<style scoped> 12.animation { 13 overflow: hidden; 14} 15.animation__box { 16 display: flex; 17} 18.train1 { 19 animation: loop 20s -10s linear infinite; 20} 21.train2 { 22 animation: loop2 20s linear infinite; 23} 24@keyframes loop { 25 0% { 26 transform: translateX(-100%); 27 } 28 100% { 29 transform: translateX(100%); 30 } 31} 32@keyframes loop2 { 33 0% { 34 transform: translateX(-200%); 35 } 36 100% { 37 transform: translateX(0); 38 } 39} 40</style>

試したこと・調べたこと

上記の詳細・結果

ページをリロードするとアニメーションが動くようになるので onMounted で animation を反映するようにも変えてみましたが変わりませんでした、、、

<script setup lang="ts"> let isAnimation = false; onMounted(() => { if (isAnimation) return; isAnimation = true; $('.train1').css('animation', 'loop 20s -10s linear infinite'); $('.train2').css('animation', 'loop2 20s linear infinite'); }); </script>

補足

特になし