Why is CSS animation very delayed with ngClass setting paused attribute?

On Iphone 6 my css animations are not performant. I created this little component to mimic the passing of time.

<div class="clockface">
     <div class="hand-container">
         <div class="hand hand-spin" [ngClass]="{'paused': isPaused }"></div>
     </div>
</div>

When I use the browser with ionic serve things look great however when I use the native app on my iphone 6 it works terribly. Is there recommendations regarding the use of animations to see good effects?

@keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
.clockface {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-block;
    background-color: black;
    border-width: 1px;
    margin-right: 20px;
    position: relative;
    z-index: 13;
    opacity: 0.7;

  }

  .hand-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .hand {
    background: red;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 4%;
    z-index: 100;

  }
  .hand-spin {

    animation-name: spin;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
  }
  .paused {
    background: orange;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
  }

Are you using Safari? It doesn’t support the Web Animations API. If you’re using that, then you need to install a polyfill. I’ve seen comments elsewhere that say (1) the polyfill is up to date, and (2) the polyfill is not up to date. I don’t know which is true.

Apple said in 2011 they would work to support the Web Animtions API. So the situation is a bit annoying. But maybe your problem is because of something else, not sure.

I am using iOS. I ended up removing the animation which I was into and used the ionic spinner which appears to animate better than what I had.