Ok, I want to see if anyone has experienced this issue.

Basically I have an implementation just like this:
https://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/

I am rotating 3 words using css keyframe animation.
9s total to cycle through all words.

3s delay on word 2
6s delay on word 3
so that the 3 words rotate in sequence.

So what happens on iOS is that this loads seemingly fine at first, but the timing is somehow off and through the course of animation the timing gets progressively worse, overlapping occurs, and eventually it's as if no animation delay exists and all words show up and disappear all at the same time.

has anyone encountered this?

-Ces



.words {
   display: inline;
  }
  .words-1 span {
   position: absolute;
   opacity: 0;
   overflow: hidden;
   color: #6b969d;
   animation: rotateWord 9s linear infinite 0s;
   -ms-animation: rotateWord 9s linear infinite 0s;
   -webkit-animation: rotateWord 9s linear infinite 0s;
  }
  .words-1 span:nth-child(2) {
   animation-delay: 3s;
   -ms-animation-delay: 3;
   -webkit-animation-delay: 3s;
   color: #6b889d;
  }
  .words-1 span:nth-child(3) {
   animation-delay: 6s;
   -ms-animation-delay: 6s;
   -webkit-animation-delay: 6s;
   color: #6b739d;
  }
  @-webkit-keyframes rotateWord {
   0% {
    opacity: 1;
   }
   5% {
    opacity: 1;
    -webkit-transform: translateY(0px);
   }
   8% {
    opacity: 1;
    -webkit-transform: translateY(0px);
   }
   30% {
    opacity: 1;
    -webkit-transform: translateY(0px);
   }
   33% {
    opacity: 0;
    -webkit-transform: translateY(0px);
   }
   80% {
    opacity: 0;
   }
   100% {
    opacity: 0;
   }
  }
 }