CODEWITHSUNDEEP
csssafarimobile-safaricss-animationsmobile-chrome
Brenda
Brenda

Reputation: 923

CSS animation-delay timing off in Safari and mobile Chrome

I've got a frustrating bug in Safari around CSS animation-delay.

This animation works beautifully on Desktop in Chrome, Firefox, IE11, IE10, but I get mixed results in Safari. The pieces of the bag should all display after an equal amount of pause (controlled by the animation-delay).

Desktop Safari will sometimes display correctly, and other times will slow down the first part of the bag transition and speed up the end, or it will clump a few transitions together. In mobile Safari and mobile Chrome on an iPhone 6, sometimes it will just ignore the animation-delay all together and transition the whole bag at once. I'm having a hard time troubleshooting when the performance isn't consistent. I added a little JavaScript to make sure that all the assets were loaded on the page before starting the animation, but that didn't seem to help. Anyone have any 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;
  }
}

Upvotes: 23

Views: 6883

Answers (4)

Oriol
Oriol

Reputation: 12650

I played a bit with the CSS as well as I looked for mobile webkit specific issues but I didn't find anything helpful.

So basically I refactored the problem and used CSS transitions for the fade-in/out effects and jQuery for managing the tempo of these animations.

See the Demo.

I tested it on iOS and Safari, as well as other browsers, and it worked well for me.

HTML (regrouped images by bag model)

<div id="bag1" class="bag shown">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-black-croc.png" class="satchel-static satchel-body">
  <!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-collar-blue-python.png" class="satchel-3 satchel-collar"> -->
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-black-croc.png" class="satchel-static satchel-gusset">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-black-croc.png" class="satchel-static satchel-piping">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-black-croc.png" class="satchel-static satchel-strap">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-marble-python.png" class="satchel-static satchel-narrow">
</div>

<div id="bag2" class="bag">
  <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-collar-bone.png" class="satchel-4 satchel-collar"> -->
  <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>

<div id="bag3" class="bag">
  <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-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>

CSS (replaced all CSS3 animations for these few lines of code)

.bag img {
  z-index: 0;
  opacity: 0;
  -webkit-transition: opacity .1s ease-in-out;
  transition: opacity .1s ease-in-out;
}

.shown img {
  opacity: 1;
}
.shown img.satchel-strap, .shown img.satchel-narrow {
  z-index: 2;
}

.bag .fadeIn {
  opacity: 1;
  z-index: 1;
}
.bag .fadeIn.satchel-strap, .bag .fadeIn.satchel-narrow {
  z-index: 3;
}

jQuery (you can set the animation parameters)

$(document).ready(function() {

  var $bags         = [$('#bag1'), $('#bag2'), $('#bag3')],
      piecesDelay   = 400,
      bagsDelay     = 3000,
      timePiecesID,
      imgs;


  setTimeout(function() { 
    loopThroughBags(1, 0); 
  }, bagsDelay);


  function fadeInPieces(k) {
    $(imgs[k]).addClass('fadeIn');

    timePiecesID = setTimeout(function() {
      if (k < imgs.length - 1) {
        k++;
        fadeInPieces(k);
      } else {
        clearTimeout(timePiecesID);
        return;
      }
    }, piecesDelay);

  } // fadeInPieces ends


  function loopThroughBags(i, j) {

    imgs = $bags[i].find('img');

    fadeInPieces(0);

    setTimeout(function() {

      clearTimeout(timePiecesID);

      $bags[i].addClass('shown');
      $(imgs).removeClass('fadeIn');
      $bags[j].removeClass('shown');

      j = i;
      i = (i < $bags.length - 1) ? i + 1 : 0;

      loopThroughBags(i, j);

    }, bagsDelay);

  } // loopThroughBags ends

});

Upvotes: 0

Ammadu
Ammadu

Reputation: 1675

from what i see you are not actually giving delays to elements correctly, animation delay assignment must be something like this.

.satchel-strap.satchel-#{$i}{
     animation-delay: $bag-piece-timing * 1.5 * $i
  }

  .satchel-body.satchel-#{$i}{
     animation-delay: $bag-piece-timing * $i;
  }

  .satchel-gusset.satchel-#{$i}{
     animation-delay: $bag-piece-timing * 0.5 * $i
  }

  .satchel-piping.satchel-#{$i}{
    animation-delay: $bag-piece-timing;
  }

  .stachel-collar.satchel-#{$i}{
    animation-delay: $bag-piece-timing;
  }

Upvotes: 4

vals
vals

Reputation: 64164

Even though in Chrome displays fine, even there there are performance problems. Trying to get performance stats is buggy, and making 6 copies of the base design and disabling GPU reproduces the problem on my machine (Chrome on Windows).

Well, here is my attempt to optimize the performance of your design.

First of all, you are using opacity, but without transition - moving very fast from 0 to 1. If all that you want is change the element visibility, you can use visibility for this. It will run much faster.

Second, you are using an animation that is different for the 5 different bags. And that keeps the first bags visible - but hidden under the other ones in the last part of the animation. You can reuse the same animation for all the elements, just changing the animation delay. You will see in my demo that the keyframes are simpler, at the cost of an increased complexity in the animation delay. Notice also that I turn off visibility as soon as posible, to avoid the cost of displaying an otherwise invisible element.

The way you handled the overlays asked for the first element of each class to be repeated, once static and another showing for some instants at the end of the cycle. I have changed this schema for another one where I am changing the z-index of the elements. Now you don't need to repeat the element.

And last, I have grouped several items under a bag class, and I am turning off also the visibility of the bag container. I believe that this somehow optimizes the performance, but I am not sure about 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 is also another posibility, that will be much more efficient, but that is less flexible: You can group your images of the same class in a composite image, and handle this as a sprite change (modifying background-image position. You need however a full redesign for this one.

Upvotes: 9

Gerben van Dijk
Gerben van Dijk

Reputation: 878

what about trying to use a simple transition in stead of a keyframe animation? you're only transitioning opacity here - maybe by using a custom bezier curve you can achieve the same effect.

you could also try replacing -webkit-transform: translateZ(0); with -webkit-transform: translate3d(0,0,0); - i've noticed slight timing issues between the two in the past (you're using this technique only to force the elements on their own hardware layer right?)

Upvotes: 6

Related Questions