iphone の実機だとテキストのアニメーションが崩れてしまいます

Question

オンラインスクールの課題で、架空サイトを作成しました。
その際、メインビジュアルでキャッチコピーを一列ずつ上からふわっと出現するようなCSSアニメーションを実装しました。
Macの検証ツールでは、iphoneサイズでも問題なくアニメーションが実装されています。
しかし、iphoneの実機では、どのブラウザで確認してもアニメーションが崩れています。
解決策を教えていただけるととても助かります。
また、何か補足で説明が必要でしたら追記します。
コーディングを学習し始めてまだ間も無く、勉強不足な面がありますことをご了承いただけると幸いです🙇‍♀️

【実現したいこと】

三列のキャッチコピーのテキストを、一列ずつふわっと出現するようにしたい

【発生している問題】

・テキストが一列に重なる→時間差でカクカクと一列ずつ出現→また一列に重なる

該当のソースコード

.catchcopy .line-1{
    animation: fadeInTop 3.4s ease 0s 1 normal;
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
  }
}

.catchcopy .line-2{
	margin-top: -80px;
  animation: fadeInTop 2.4s ease 0s 1 normal;
}

@keyframes fadeInTop {
0% {
  opacity: 0;
  transform: translateY(-30px);
}
100% {
  opacity: 1;
}
}

.catchcopy .line-3{
	margin-top: -180px;
  animation: fadeInTop 1.4s ease 0s 1 normal;
}

@keyframes fadeInTop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
  }
}

↓iphoneの画面

【 試したこと】

• iphone端末だけtranslateY→translateXのコードに変更
• translateのpxの値の変更

上記はスクールの講師に試してみてと言われて行ったのですが改善されず

【補足情報】

パソコン情報は以下です。
Macbook Air 13
Atom←エディタ

Answer 1

試していませんが、これでどうでしょうか。

@keyframes fadeInTop {
  0% {
    opacity: 0;
    transform: translate(0,-30px);
  }
  100% {
    opacity: 1;
    transform: translate(0,0);
  }
}

こちらも参考になるかもしれません

最終手段として、animationイベントや、setTimeout関数などを使ってJavascriptで順番にアニメーションさせるのもいいかもしれません。