CSS animation-delay timing off in Safari and mobile Chrome -

i've got frustrating bug in safari around css animation-delay.

this animation works beautifully on desktop in chrome, firefox, ie11, ie10, mixed results in safari. pieces of bag should display after equal amount of pause (controlled animation-delay).

desktop safari display correctly, , other times slow down first part of bag transition , speed end, or clump few transitions together. in mobile safari , mobile chrome on iphone 6, ignore animation-delay , transition whole bag @ once. i'm having hard time troubleshooting when performance isn't consistent. added little javascript make sure assets loaded on page before starting animation, didn't seem help. have idea what's happening here?

http://codepen.io/brendamarienyc/pen/qdoozm

@-webkit-keyframes bag-1 {   0%,      19.9% {     opacity: 0;   }   20%,     100% {     opacity: 1;   } } @keyframes bag-1 {   0%,      19.9% {     opacity: 0;   }   20%,     100% {     opacity: 1;   } } .satchel-1 {   -webkit-animation-name: bag-1;           animation-name: bag-1;   -webkit-animation-duration: 22500ms;           animation-duration: 22500ms;   -webkit-animation-iteration-count: infinite;           animation-iteration-count: infinite;   -webkit-transform: translatez(0);           transform: translatez(0);   opacity: 0; } .preload .satchel-1 {   -webkit-animation-name: none !important;           animation-name: none !important; }  @-webkit-keyframes bag-2 {   0%,      39.9% {     opacity: 0;   }   40%,     100% {     opacity: 1;   } }  @keyframes bag-2 {   0%,      39.9% {     opacity: 0;   }   40%,     100% {     opacity: 1;   } } .satchel-2 {   -webkit-animation-name: bag-2;           animation-name: bag-2;   -webkit-animation-duration: 22500ms;           animation-duration: 22500ms;   -webkit-animation-iteration-count: infinite;           animation-iteration-count: infinite;   -webkit-transform: translatez(0);           transform: translatez(0);   opacity: 0; } .preload .satchel-2 {   -webkit-animation-name: none !important;           animation-name: none !important; }  @-webkit-keyframes bag-3 {   0%,      59.9% {     opacity: 0;   }   60%,     100% {     opacity: 1;   } }  @keyframes bag-3 {   0%,      59.9% {     opacity: 0;   }   60%,     100% {     opacity: 1;   } } .satchel-3 {   -webkit-animation-name: bag-3;           animation-name: bag-3;   -webkit-animation-duration: 22500ms;           animation-duration: 22500ms;   -webkit-animation-iteration-count: infinite;           animation-iteration-count: infinite;   -webkit-transform: translatez(0);           transform: translatez(0);   opacity: 0; } .preload .satchel-3 {   -webkit-animation-name: none !important;           animation-name: none !important; }  @-webkit-keyframes bag-4 {   0%,      79.9% {     opacity: 0;   }   80%,     100% {     opacity: 1;   } }  @keyframes bag-4 {   0%,      79.9% {     opacity: 0;   }   80%,     100% {     opacity: 1;   } } .satchel-4 {   -webkit-animation-name: bag-4;           animation-name: bag-4;   -webkit-animation-duration: 22500ms;           animation-duration: 22500ms;   -webkit-animation-iteration-count: infinite;           animation-iteration-count: infinite;   -webkit-transform: translatez(0);           transform: translatez(0);   opacity: 0; } .preload .satchel-4 {   -webkit-animation-name: none !important;           animation-name: none !important; }  @-webkit-keyframes bag-5 {   0%,      99.9% {     opacity: 0;   }   100%,     100% {     opacity: 1;   } }  @keyframes bag-5 {   0%,      99.9% {     opacity: 0;   }   100%,     100% {     opacity: 1;   } } .satchel-5 {   -webkit-animation-name: bag-5;           animation-name: bag-5;   -webkit-animation-duration: 22500ms;           animation-duration: 22500ms;   -webkit-animation-iteration-count: infinite;           animation-iteration-count: infinite;   -webkit-transform: translatez(0);           transform: translatez(0);   opacity: 0; } .preload .satchel-5 {   -webkit-animation-name: none !important;           animation-name: none !important; }  .satchel-container {   height: 450px;   width: 472px;   margin: 2em auto;   position: relative; } @media (max-width: 500px) {   .satchel-container {     height: 300px;     width: 315px;   } }  .satchel-shadow {   position: absolute;   right: 0px;   bottom: 0px;   left: 0px;   height: 94px;   width: 472px; } @media (max-width: 500px) {   .satchel-shadow {     height: 63px;     width: 315px;   } }  .satchel-body {   position: absolute;   right: 0px;   bottom: 0px;   left: 0px;   height: 295px;   width: 472px;   -webkit-animation-delay: 0;           animation-delay: 0; } @media (max-width: 500px) {   .satchel-body {     height: 197px;     width: 315px;   } }  .satchel-gusset {   position: absolute;   bottom: 30px;   left: 14px;   height: 221px;   width: 441px;   -webkit-animation-delay: 450ms;           animation-delay: 450ms; } @media (max-width: 500px) {   .satchel-gusset {     position: absolute;     bottom: 20px;     left: 10px;     height: 149px;     width: 294px;   } }  .satchel-piping {   position: absolute;   bottom: 22px;   left: 21px;   height: 268px;   width: 429px;   -webkit-animation-delay: 900ms;           animation-delay: 900ms; } @media (max-width: 500px) {   .satchel-piping {     position: absolute;     bottom: 15px;     left: 14px;     height: 179px;     width: 286px;   } }  .satchel-collar {   position: absolute;   bottom: 15px;   left: 30px;   height: 63px;   width: 412px;   -webkit-animation-delay: 900ms;           animation-delay: 900ms; } @media (max-width: 500px) {   .satchel-collar {     position: absolute;     bottom: 7px;     left: 20px;     height: 42px;     width: 275px;   } }  .satchel-strap {   position: absolute;   bottom: 70px;   left: 139px;   height: 370px;   width: 195px;   -webkit-animation-delay: 1350ms;           animation-delay: 1350ms; } @media (max-width: 500px) {   .satchel-strap {     position: absolute;     bottom: 47px;     left: 92px;     height: 247px;     width: 130px;   } }  .satchel-narrow {   position: absolute;   bottom: 68px;   left: 13px;   height: 232px;   width: 377px;   -webkit-animation-delay: 1800ms;           animation-delay: 1800ms; } @media (max-width: 500px) {   .satchel-narrow {     position: absolute;     bottom: 46px;     left: 8px;     height: 155px;     width: 251px;   } } 

even though in chrome displays fine, there there performance problems. trying performance stats buggy, , making 6 copies of base design , disabling gpu reproduces problem on machine (chrome on windows).

well, here attempt optimize performance of design.

first of all, using opacity, without transition - moving fast 0 1. if want change element visibility, can use visibility this. run faster.

second, using animation different 5 different bags. , keeps first bags visible - hidden under other ones in last part of animation. can reuse same animation elements, changing animation delay. see in demo keyframes simpler, @ cost of increased complexity in animation delay. notice turn off visibility posible, avoid cost of displaying otherwise invisible element.

the way handled overlays asked first element of each class repeated, once static , showing instants @ end of cycle. have changed schema 1 changing z-index of elements. don't need repeat element.

and last, have grouped several items under bag class, , turning off visibility of bag container. believe somehow optimizes performance, not sure it

my demo:

@-webkit-keyframes satchel {    0% {      visibility: visible;      z-index: 100;    }    25% {      visibility: visible;      z-index: 1;    }    25%, 100% {      visibility: hidden;    }  }  @keyframes satchel {    0% {      visibility: visible;      z-index: 100;    }    25% {      visibility: visible;      z-index: 1;    }    25%, 100% {      visibility: hidden;    }  }    .satchel-1, .satchel-2, .satchel-3, .satchel-4, .satchel-5 {      -webkit-animation: satchel 22500ms infinite;      animation-name: satchel;      animation-duration: 22500ms;      animation-iteration-count: infinite;  }    /* body 0ms gusset 450ms collar=900ms piping=900ms strap=1350ms narrow=1800ms  */  .satchel-1.satchel-body {      -webkit-animation-delay: calc(0ms - 22500ms);      animation-delay: calc(0ms - 22500ms);  }  .satchel-1.satchel-gusset {      -webkit-animation-delay: calc(450ms - 22500ms);      animation-delay: calc(450ms - 22500ms);  }  .satchel-1.satchel-collar {      -webkit-animation-delay: calc(900ms - 22500ms);      animation-delay: calc(900ms - 22500ms);  }  .satchel-1.satchel-piping {      -webkit-animation-delay: calc(900ms - 22500ms);      animation-delay: calc(900ms - 22500ms);  }  .satchel-1.satchel-strap {      -webkit-animation-delay: calc(1350ms - 22500ms);      animation-delay: calc(1350ms - 22500ms);  }  .satchel-1.satchel-narrow {      -webkit-animation-delay: calc(1800ms - 22500ms);      animation-delay: calc(1800ms - 22500ms);  }    /* satchel-2 4500ms */  .satchel-2.satchel-body {      -webkit-animation-delay: calc(0ms + 4500ms - 22500ms);      animation-delay: calc(0ms + 4500ms - 22500ms);  }  .satchel-2.satchel-gusset {      -webkit-animation-delay: calc(450ms + 4500ms - 22500ms);      animation-delay: calc(450ms + 4500ms - 22500ms);  }  .satchel-2.satchel-collar {      -webkit-animation-delay: calc(900ms + 4500ms - 22500ms);      animation-delay: calc(900ms + 4500ms - 22500ms);  }  .satchel-2.satchel-piping {      -webkit-animation-delay: calc(900ms + 4500ms - 22500ms);      animation-delay: calc(900ms + 4500ms - 22500ms);  }  .satchel-2.satchel-strap {      -webkit-animation-delay: calc(1350ms + 4500ms - 22500ms);      animation-delay: calc(1350ms + 4500ms - 22500ms);  }  .satchel-2.satchel-narrow {      -webkit-animation-delay: calc(1800ms + 4500ms - 22500ms);      animation-delay: calc(1800ms + 4500ms - 22500ms);  }    /* satchel-3 9000ms */  .satchel-3.satchel-body {      -webkit-animation-delay: calc(0ms + 9000ms - 22500ms);      animation-delay: calc(0ms + 9000ms - 22500ms);  }  .satchel-3.satchel-gusset {      -webkit-animation-delay: calc(450ms + 9000ms - 22500ms);      animation-delay: calc(450ms + 9000ms - 22500ms);  }  .satchel-3.satchel-collar {      -webkit-animation-delay: calc(900ms + 9000ms - 22500ms);      animation-delay: calc(900ms + 9000ms - 22500ms);  }  .satchel-3.satchel-piping {      -webkit-animation-delay: calc(900ms + 9000ms - 22500ms);      animation-delay: calc(900ms + 9000ms - 22500ms);  }  .satchel-3.satchel-strap {      -webkit-animation-delay: calc(1350ms + 9000ms - 22500ms);      animation-delay: calc(1350ms + 9000ms - 22500ms);  }  .satchel-3.satchel-narrow {      -webkit-animation-delay: calc(1800ms + 9000ms - 22500ms);      animation-delay: calc(1800ms + 9000ms - 22500ms);  }  /* satchel-4 13500ms */  .satchel-4.satchel-body {      -webkit-animation-delay: calc(0ms + 13500ms - 22500ms);      animation-delay: calc(0ms + 13500ms - 22500ms);  }  .satchel-4.satchel-gusset {      -webkit-animation-delay: calc(450ms + 13500ms - 22500ms);      animation-delay: calc(450ms + 13500ms - 22500ms);  }  .satchel-4.satchel-collar {      -webkit-animation-delay: calc(900ms + 13500ms - 22500ms);      animation-delay: calc(900ms + 13500ms - 22500ms);  }  .satchel-4.satchel-piping {      -webkit-animation-delay: calc(900ms + 13500ms - 22500ms);      animation-delay: calc(900ms + 13500ms - 22500ms);  }  .satchel-4.satchel-strap {      -webkit-animation-delay: calc(1350ms + 13500ms - 22500ms);      animation-delay: calc(1350ms + 13500ms - 22500ms);  }  .satchel-4.satchel-narrow {      -webkit-animation-delay: calc(1800ms + 13500ms - 22500ms);      animation-delay: calc(1800ms + 13500ms - 22500ms);  }  /* satchel-5 18000ms */  .satchel-5.satchel-body {      -webkit-animation-delay: calc(0ms + 18000ms - 22500ms);      animation-delay: calc(0ms + 18000ms - 22500ms);  }  .satchel-5.satchel-gusset {      -webkit-animation-delay: calc(450ms + 18000ms - 22500ms);      animation-delay: calc(450ms + 18000ms - 22500ms);  }  .satchel-5.satchel-collar {      -webkit-animation-delay: calc(900ms + 18000ms - 22500ms);      animation-delay: calc(900ms + 18000ms - 22500ms);  }  .satchel-5.satchel-piping {      -webkit-animation-delay: calc(900ms + 18000ms - 22500ms);      animation-delay: calc(900ms + 18000ms - 22500ms);  }  .satchel-5.satchel-strap {      -webkit-animation-delay: calc(1350ms + 18000ms - 22500ms);      animation-delay: calc(1350ms + 18000ms - 22500ms);  }  .satchel-5.satchel-narrow {      -webkit-animation-delay: calc(1800ms + 18000ms - 22500ms);      animation-delay: calc(1800ms + 18000ms - 22500ms);  }    @-webkit-keyframes bag {    0%, 35% {      visibility: visible;    }    35%, 100% {      visibility: hidden;    }  }  @keyframes bag {    0%, 35% {      visibility: visible;    }    35%, 100% {      visibility: hidden;    }  }    .bag {      -webkit-animation-name: bag;      -webkit-animation-duration: 22500ms;      -webkit-animation-iteration-count: infinite;      animation-name: bag;      animation-duration: 22500ms;      animation-iteration-count: infinite;      z-index: 1000;      position: absolute;      height: 100%;      width: 100%;  }  .bag:nth-child(2) {      -webkit-animation-delay: calc(4500ms - 22500ms);      animation-delay: calc(4500ms - 22500ms);  }  .bag:nth-child(3) {      -webkit-animation-delay: calc(9000ms - 22500ms);      animation-delay: calc(9000ms - 22500ms);  }  .bag:nth-child(4) {      -webkit-animation-delay: calc(13500ms - 22500ms);      animation-delay: calc(13500ms - 22500ms);  }  .bag:nth-child(5) {      -webkit-animation-delay: calc(18000ms - 22500ms);      animation-delay: calc(18000ms - 22500ms);  }      .satchel-container {    height: 450px;    width: 472px;    margin: 2em;    position: relative;    display: inline-block;  }  @media (max-width: 500px) {    .satchel-container {      height: 300px;      width: 315px;    }  }    .satchel-shadow {    position: absolute;    right: 0px;    bottom: 0px;    left: 0px;    height: 94px;    width: 472px;  }  @media (max-width: 500px) {    .satchel-shadow {      height: 63px;      width: 315px;    }  }    .satchel-body {    position: absolute;    right: 0px;    bottom: 0px;    left: 0px;    height: 295px;    width: 472px;  }  @media (max-width: 500px) {    .satchel-body {      height: 197px;      width: 315px;    }  }    .satchel-gusset {    position: absolute;    bottom: 30px;    left: 14px;    height: 221px;    width: 441px;  }  @media (max-width: 500px) {    .satchel-gusset {      position: absolute;      bottom: 20px;      left: 10px;      height: 149px;      width: 294px;    }  }    .satchel-piping {    position: absolute;    bottom: 22px;    left: 21px;    height: 268px;    width: 429px;  }  @media (max-width: 500px) {    .satchel-piping {      position: absolute;      bottom: 15px;      left: 14px;      height: 179px;      width: 286px;    }  }    .satchel-collar {    position: absolute;    bottom: 15px;    left: 30px;    height: 63px;    width: 412px;  }  @media (max-width: 500px) {    .satchel-collar {      position: absolute;      bottom: 7px;      left: 20px;      height: 42px;      width: 275px;    }  }    .satchel-strap {    position: absolute;    bottom: 70px;    left: 139px;    height: 370px;    width: 195px;  }  @media (max-width: 500px) {    .satchel-strap {      position: absolute;      bottom: 47px;      left: 92px;      height: 247px;      width: 130px;    }  }    .satchel-narrow {    position: absolute;    bottom: 68px;    left: 13px;    height: 232px;    width: 377px;      animation-delay: calc(1800ms - 22500ms);  }  @media (max-width: 500px) {    .satchel-narrow {      position: absolute;      bottom: 46px;      left: 8px;      height: 155px;      width: 251px;    }  }

<section class="bag-animation">      <div class="satchel-container">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-shadow.png" class="satchel-shadow">          <!--satchel body-->        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-marble-python.png" class="satchel-1 satchel-body">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-celedon.png" class="satchel-2 satchel-body">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-blue-python.png" class="satchel-body satchel-3">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-bone.png" class="satchel-4 satchel-body">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-black-croc.png" class="satchel-5 satchel-body">          <!--bag marble-->        <div class="bag">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-marble-python.png" class="satchel-1 satchel-gusset">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-marble-python.png" class="satchel-1 satchel-piping">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-marble-python.png" class="satchel-1 satchel-strap">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-blue-python.png" class="satchel-1 satchel-narrow">        </div>          <!--bag celedon-->        <div class="bag">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-celedon.png" class="satchel-2 satchel-gusset">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-celedon.png" class="satchel-2 satchel-piping">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-celedon.png" class="satchel-2 satchel-strap">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-celedon.png" class="satchel-2 satchel-narrow">  	</div>          <!--bag blue-->        <div class="bag">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-blue-python.png" class="satchel-3 satchel-gusset">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-blue-python.png" class="satchel-3 satchel-piping">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-blue-python.png" class="satchel-3 satchel-strap">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-blue-python.png" class="satchel-3 satchel-narrow">  	</div>          <!--bag bone-->        <div class="bag">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-bone.png" class="satchel-4 satchel-gusset">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-bone.png" class="satchel-4 satchel-piping">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-bone.png" class="satchel-4 satchel-strap">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-bone.png" class="satchel-4 satchel-narrow">        </div>          <!--bag bone-->        <div class="bag">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-black-croc.png" class="satchel-5 satchel-gusset">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-black-croc.png" class="satchel-5 satchel-piping">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-black-croc.png" class="satchel-5 satchel-strap">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-black-croc.png" class="satchel-5 satchel-narrow">        </div>        </div>        </section>

there posibility, more efficient, less flexible: can group images of same class in composite image, , handle sprite change (modifying background-image position. need full redesign one.