title: CSS Animations out of sync on iOS devices?
body: <p>I've made a simple animation I want to use as a pre-loader for my website using CSS animations.</p>
  
  <p>It seems to work beautifully on everything except iOS devices, where the separate elements seem to fire out of sync and end up just doing their own thing.</p>
  
  <p>You can see the fiddle and try it own on your phone <a href="https://jsfiddle.net/uLc6h8x1/embedded/result/" rel="nofollow">here</a></p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Weird – so the JSfiddle seems to work fine on iOS but when the same code comes into practice live on my site it seems to mess things up? you can see it <strong><a href="http://www.bensilvertown.com.gridhosted.co.uk" rel="nofollow">here</a></strong></p>
  
  <p>Makes me think its actually something to do with my pre-loading script?</p>
  
  <pre><code>$(window).load(function() { // makes sure the whole site is loaded
              $('#status').fadeOut(); // will first fade out the loading animation
              $('#preloader').delay(350).fadeOut(300); // will fade out the white DIV that covers the website.
              $('body').delay(350).css({'overflow':'visible'});
          })
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>     .square { 
  background: #61CAFF;
    width: 150px;
    height: 150px;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    -webkit-animation: shrinkgrow 3s ease-in-out infinite;
            animation: shrinkgrow 3s ease-in-out infinite;
    -webkit-animation-delay: 2s;
            animation-delay: 2s;
  }
  .circle {
    background: #9DFDC3;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    -webkit-animation: shrinkgrow 3s ease-in-out infinite;
            animation: shrinkgrow 3s ease-in-out infinite;
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
  }
  .triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 80px 140px 80px;
    border-color: transparent transparent #F896D5 transparent;
    -webkit-transform: scale(0);
        -ms-transform: scale(0);
            transform: scale(0);
    -webkit-animation: shrinkgrow 3s ease-in-out infinite;
            animation: shrinkgrow 3s ease-in-out infinite;
    -webkit-animation-delay: 1s;
            animation-delay: 1s;
  }
  @-webkit-keyframes shrinkgrow {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    12.5% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    25% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    33% {
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    100% {
      -webkit-transform: scale(0);
              transform: scale(0);
    }
  }
  @keyframes shrinkgrow {
    0% {
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    12.5% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    25% {
      -webkit-transform: scale(1);
              transform: scale(1);
    }
    33% {
      -webkit-transform: scale(0);
              transform: scale(0);
    }
    100% {
      -webkit-transform: scale(0);
              transform: scale(0);
    }
  }
  </code></pre>