css - Safari 和移动 Chrome 中的 CSS 动画延迟时间关闭

Question

我在 Safari 中遇到了一个关于 CSS 动画延迟的令人沮丧的错误。

该动画在 Chrome、Firefox、IE11、IE10 的桌面上运行良好，但在 Safari 中我得到的结果好坏参半。在等量的暂停后（由动画延迟控制），袋子的各个部分都应该显示出来。

Desktop Safari 有时会正确显示，而其他时候会减慢包过渡的第一部分并加快结束，或者它将几个过渡聚集在一起。在 iPhone 6 上的移动 Safari 和移动 Chrome 中，有时它会一起忽略动画延迟并立即转换整个包。当性能不一致时，我很难进行故障排除。我添加了一些 JavaScript 以确保在开始动画之前将所有资产加载到页面上，但这似乎没有帮助。有人知道这里发生了什么吗？

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;
  }
}

Answer 1

即使在 Chrome 中显示正常，即使存在性能问题。试图获取性能统计数据是错误的，制作 6 个基本设计副本并禁用 GPU 会在我的机器上重现问题（Windows 上的 Chrome）。

好吧，这是我优化设计性能的尝试。

首先，您使用的是不透明度，但没有过渡 - 从 0 到 1 的移动速度非常快。如果您想要的只是更改元素的可见性，您可以为此使用可见性。它会运行得更快。

其次，您为 5 个不同的包使用不同的动画。这使得第一个袋子可见 - 但在动画的最后部分隐藏在其他袋子下面。您可以为所有元素重复使用相同的动画，只需更改动画延迟。您将在我的演示中看到关键帧更简单，但代价是动画延迟的复杂性增加。另请注意，我会尽快关闭可见性，以避免显示其他不可见元素的成本。

您处理叠加层的方式要求重复每个类的第一个元素，一次是静态的，另一个在循环结束时显示一些瞬间。我已将此架构更改为另一个我正在更改元素的 z-index 的架构。现在您不需要重复该元素。

最后，我将几个项目分组到一个袋子类下，我也关闭了袋子容器的可见性。我相信这会以某种方式优化性能，但我不确定

我的演示：

@-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>

还有另一种可能性，效率更高，但灵活性较差：您可以将同一类的图像分组到合成图像中，并将其作为精灵更改处理（修改背景图像位置。但是您需要对此进行了全面的重新设计。

Answer 2

尝试使用简单的过渡而不是关键帧动画怎么样？您只是在此处转换不透明度-也许通过使用自定义贝塞尔曲线可以达到相同的效果。

您也可以尝试替换 -webkit-transform: translateZ(0); 使用 -webkit-transform: translate3d(0,0,0); - 过去我注意到两者之间存在轻微的时间问题（您使用这种技术只是为了将元素强制放在它们自己的硬件层上，对吗？）

Answer 3

从我看到你实际上并没有正确地延迟元素，动画延迟分配必须是这样的。

.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;
  }

Answer 4

CSS我在寻找移动特定问题的同时玩了一点，webkit但我没有发现任何有用的东西。

所以基本上我重构了这个问题并用于CSS transitions淡入/淡出效果和 jQuery 来管理这些动画的节奏。

请参阅演示。

我在 iOS 和 Safari 以及其他浏览器上对其进行了测试，对我来说效果很好。

HTML（按袋子模型重新组合的图像）

<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（替换了这几行代码的所有 CSS3 动画）

.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（可以设置动画参数）

$(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

});