Задержка синхронизации анимации CSS в Safari и мобильном Chrome

Ответ 1

Несмотря на то, что в Chrome отображаются хорошо, даже там есть проблемы с производительностью. Попытка получить статистику производительности глючит, и создание 6-ти копий базового дизайна и отключение GPU воспроизводит проблему на моей машине (Chrome в Windows).

Хорошо, вот моя попытка оптимизировать производительность вашего дизайна.

Прежде всего, вы используете непрозрачность, но без перехода - очень быстро перемещаетесь от 0 до 1. Если все, что вы хотите, это изменение видимости элемента, вы можете использовать видимость для этого. Он будет работать намного быстрее.

Во-вторых, вы используете анимацию, которая отличается для 5 разных мешков. И это держит первые мешки видимыми - но скрыты под другими в последней части анимации. Вы можете повторно использовать одну и ту же анимацию для всех элементов, просто изменив задержку анимации. В моей демонстрации вы увидите, что ключевые кадры проще, за счет увеличения сложности задержки анимации. Также обратите внимание, что я отключу видимость как можно скорее, чтобы избежать стоимости отображения невидимого элемента.

То, как вы обрабатывали оверлеи, запрашиваемые для первого элемента каждого класса, повторялись, как только статические и другие показывались в течение нескольких мгновений в конце цикла. Я изменил эту схему для другой, где я изменяю z-индекс элементов. Теперь вам не нужно повторять элемент.

И, наконец, я сгруппировал несколько предметов под класс сумки, и я отключил также видимость контейнера для мешков. Я считаю, что это как-то оптимизирует производительность, но я не уверен в этом.

Моя демонстрация:

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

Ответ 2

как насчет того, чтобы использовать простой переход вместо анимации ключевого кадра? вы только переступаете непрозрачность здесь - возможно, используя обычную кривую Безье, вы можете добиться того же эффекта.

вы также можете попробовать заменить -webkit-transform: translateZ (0); с -webkit-transform: translate3d (0,0,0); - Я заметил небольшие проблемы с синхронизацией между ними в прошлом (вы используете этот метод только для того, чтобы заставить элементы на собственном аппаратном уровне правильно?)

Ответ 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;
  }

Ответ 4

Я немного поиграл с CSS, а также искал конкретные проблемы с мобильным телефоном webkit, но я не нашел ничего полезного.

В основном я реорганизовал проблему и использовал CSS transitions для эффектов fade-in/out и 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

});