@keyframes ANIMATION NOT WORKING ONLY ON IPHONES

Question

I have developed a webpage using HTML/CSS and am using @keyframes to animate an infinite vertical movement of a list of 4 texts(showing one text at a time). The code works on all the browsers in all android devices, macs and ipads. But it doesn't work only on all the browsers of an iphone. I have tried the below solutions and they haven't worked: 1.I tried using only @keyframes. 2.I tried using both @keyframes and @-webkit-keyframes. 3. I tried using both @keyframes and @-webkit-keyframes with different animation names for both the keyframes. 4. I tried using translate3d instead of translateY.

Below is the code of my keyframes:

   .mobile.up p {
     a{
       padding-left: 0px !important;
       padding-right: 0px !important;
       padding-top: 0px !important;
     color: #F2F4F6;
     font-family: 'Gotham Medium';
     border-bottom: 1px solid #F2F4F6;
      padding-bottom: 2px;
       font-style: normal;
       font-size: 12px;
       line-height: 200%;
     }
    transform:translate3d(0, 100%, 0);
    // -moz-transform:translate3d(0, 100%, 0);
      -webkit-transform:translate3d(0, 100%, 0);
    }
   .mobile.up p:nth-child(1) {
    animation: up-mobile-one 20s ease infinite;
    // -moz-animation: up-mobile-one-moz 20s ease infinite;
      -webkit-animation: up-mobile-one-webkit 20s ease infinite;
   }
   .mobile.up p:nth-child(2) {
    animation: up-mobile-two 20s ease infinite;
    // -moz-animation: up-mobile-two-moz 20s ease infinite;
      -webkit-animation: up-mobile-two-webkit 20s ease infinite;
  }

   .mobile.up p:nth-child(3) {
    animation: up-mobile-three 20s ease infinite;
    // -moz-animation: up-mobile-three-moz 20s ease infinite;
      -webkit-animation: up-mobile-three-webkit 20s ease infinite;
   }

   .mobile.up p:nth-child(4) {
    animation: up-mobile-four 20s ease infinite;
    // -moz-animation: up-mobile-four-moz 20s ease infinite;
      -webkit-animation: up-mobile-four-webkit 20s ease infinite;
    }


   /**Keyframes **/
   @keyframes up-mobile-one {
       0%{
            transform:translate3d(0, 100%, 0);
        opacity: 1;
        }
        5% {
            transform:translate3d(0, 0, 0);
        opacity: 1;
        }
        25% {
            transform:translate3d(0, 0, 0);
        opacity: 0;
        }
        100%{
            transform:translate3d(0, 0, 0);
        opacity: 0;
        }
   }
   @keyframes up-mobile-two {
       0% {
            transform:translate3d(0, 100%, 0);
        opacity: 1;
        }
        25% {
         transform:translate3d(0, 100%, 0);
         opacity: 1;
       }
       30%{
           transform:translate3d(0, -100%, 0);
           opacity: 1;
       }
       50% {
         transform:translate3d(0, -100%, 0);
         opacity: 0;
       }
       100%{
            transform:translate3d(0, -100%, 0);
        opacity: 0;
        }
   }
   @keyframes up-mobile-three {
       0% {
            transform:translate3d(0, 100%, 0);
        opacity: 1;
        }
        50% {
         transform:translate3d(0, 100%, 0);
         opacity: 1;
       }
       55% {
         transform:translate3d(0, -200%, 0);
         opacity: 1;
       }
       75%{
            transform:translate3d(0, -200%, 0);
        opacity: 0;
        }
       100%{
            transform:translate3d(0, -200%, 0);
        opacity: 0;
        }
   }

   @keyframes up-mobile-four {
       0% {
        transform:translate3d(0, 100%, 0);
      opacity: 1;
        }
        75% {
         transform:translate3d(0, 100%, 0);
         opacity: 1;
       }
       80% {
         transform:translate3d(0, -300%, 0);
         opacity: 1;
       }
       100%{
            transform:translate3d(0, -300%, 0);
        opacity: 0;
        }
   }


   /** Webkit Keyframes **/
   @-webkit-keyframes up-mobile-one-webkit {
       0%{
        -webkit-transform:translate3d(0, 100%, 0);
        opacity: 1;
       }
       5% {
        -webkit-transform:translate3d(0, 0, 0);
        opacity: 1;
       }
       25% {
        -webkit-transform:translate3d(0, 0, 0);
        opacity: 0;
       }
       100%{
        -webkit-transform:translate3d(0, 0, 0);
        opacity: 0;
       }
   }
   @-webkit-keyframes up-mobile-two-webkit {
       0% {
        -webkit-transform:translate3d(0, 100%, 0);
        opacity: 1;
       }
       25% {
         -webkit-transform:translate3d(0, 100%, 0);
         opacity: 1;
       }
       30%{
           -webkit-transform:translate3d(0, -100%, 0);
           opacity: 1;
       }
       50% {
         -webkit-transform:translate3d(0, -100%, 0);
         opacity: 0;
       }
       100%{
         -webkit-transform:translate3d(0, -100%, 0);
        opacity: 0;
       }
   }
   @-webkit-keyframes up-mobile-three-webkit {
       0% {
        -webkit-transform:translate3d(0, 100%, 0);
        opacity: 1;
       }
       50% {
         -webkit-transform:translate3d(0, 100%, 0);
         opacity: 1;
       }
       55% {
         -webkit-transform:translate3d(0, -200%, 0);
         opacity: 1;
       }
       75%{
         -webkit-transform:translate3d(0, -200%, 0);
        opacity: 0;
       }
       100%{
         -webkit-transform:translate3d(0, -200%, 0);
        opacity: 0;
       }
   }

   @-webkit-keyframes up-mobile-four-webkit {
       0% {
       -webkit-transform:translate3d(0, 100%, 0);
      opacity: 1;
       }
       75% {
         -webkit-transform:translate3d(0, 100%, 0);
         opacity: 1;
       }
       80% {
         -webkit-transform:translate3d(0, -300%, 0);
         opacity: 1;
       }
       100%{
         -webkit-transform:translate3d(0, -300%, 0);
        opacity: 0;
       }
   }

Answer 1

Have you tried adding a short delay to your animations? I had a similar issue and tried all the things you tried as well with no luck, but adding a half second delay to my animation got it to work properly on iPhone browsers.