CSS Keyframes only animate sometimes in iOS

I'm building a tiny site for me right now. If you click on a nav-item the old content should slide back and to the left while fading out. The new content should slide in from the right while fading in and zooms to 100%. (watch the live example on desktop)

On my mac everything is working fine but on my iphone only the fadeout-animation works (safari & chrome). Well, the fadein-animation works sometimes if you load the site, but if you want to switch content it never works. There is just nothing for the duration of the animation and then the content appears right away at 100% of the keyframes.

Live example: http://haeki.com/haeki/ - navigation is not working 100%, but for this example it should be enough. :-)

May somebody help?

/* The animation code */

@keyframes fadeOut {
      0%{
        transform: scale(1) translate3d(0,0,0);
        opacity: 1;
      }
      25% {
        transform: scale(1) translate3d(0,100px,-100px);
        opacity: 0.5;
      }
      75% {
        transform: scale(1) translate3d(-500px,100px,-100px);
        opacity: 0;
      }
      100% {
        transform: scale(1) translate3d(-500px,100px,-100px);
        opacity: 0;
        display: none;
      }
  }

  @-webkit-keyframes fadeOut {
      0%{
        -webkit-transform: scale(1) translate3d(0,0,0);
        opacity: 1;
      }
      25% {
        -webkit-transform: scale(1) translate3d(0,100px,-100px);
        opacity: 0.5;
      }
      75% {
        -webkit-transform: scale(1) translate3d(-500px,100px,-100px);
        opacity: 0;
      }
      100% {
        -webkit-transform: scale(1) translate3d(-500px,100px,-100px);
        opacity: 0;
        display: none;
      }
  }

  @keyframes fadeIn {
      0%{
        transform: scale(1) translate3d(500px,100px,-100px);
        opacity: 0;
      }
      25% {
        transform: scale(1) translate3d(500px,100px,-100px);
        opacity: 0;
      }
      75% {
        transform: scale(1) translate3d(0,100px,-100px);
        opacity: 0.5;
      }
      100% {
        transform: scale(1) translate3d(0,0,0);
        opacity: 1;
      }
  }
  @-webkit-keyframes fadeIn {
      0%{
        -webkit-transform: scale(1) translate3d(500px,100px,-100px);
        opacity: 0;
      }
      25% {
        -webkit-transform: scale(1) translate3d(500px,100px,-100px);
        opacity: 0;
      }
      75% {
        -webkit-transform: scale(1) translate3d(0,100px,-100px);
        opacity: 0.5;
      }
      100% {
        -webkit-transform: scale(1) translate3d(0,0,0);
        opacity: 1;
      }
  }
  .inactive{
    -webkit-animation: fadeOut 2s forwards;
    animation: fadeOut 2s forwards;
  }
  .active{
    -webkit-animation: fadeIn 2s forwards;
    animation: fadeIn 2s forwards;
  }

Was an iOS 9.2-Bug. Updated to 9.3 and it worked. Good invested 3 hours.. :-D