Как синхронизировать несколько анимированных изображений PNG на веб-странице HTML? - PullRequest
Новая
       15

Как синхронизировать несколько анимированных изображений PNG на веб-странице HTML?

0 голосов
/ 19 октября 2019

Два анимированных PNG-изображения загружаются как background-images в CSS на веб-странице HTML, см. Код ниже. Каждое изображение анимирует один кадр в секунду и циклично.

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

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

HTML 

<div class="car"> ... </div>
<div class="bus"> ... </div>

CSS 

.car {
  background-image: url('car.png');
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 400px 200px;
}

.bus {
  background-image: url('bus.png');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 600px 300px;
}

1 Ответ

0 голосов
/ 19 октября 2019

Вы не можете контролировать время анимации, загруженной в изображение. Если ваши анимации нельзя объединить в одно изображение, вы должны выполнить анимацию на стороне клиента.

...