Как улучшить плавность анимации для картинок на чистом css?

Question

[cker]

У меня есть 2 картинки одна поверх другой. Картинки просто движутся справа налево. На некоторых ПК заметно подергивание. Я так понимаю это происходит когда компьютер чем-то перегружается.
Использую простой код (ниже). Может у кого-то есть опыт как избежать подергиваний?

Вот код:

.header .img.img-1 {
  background: url("1.svg") repeat-x right bottom / 4571px 608px;
  height: 608px;
  width: 9142px;
  bottom: 0;
  animation: loop 30s infinite linear;
}

.header .img.img-2 {
  background: url("2.svg") repeat-x right bottom / 4575px 488px;
  height: 488px;
  width: 9150px;
  bottom: 104px;
  animation: loop 35s infinite linear;
}

Answer 1

[Roman Khegay]

transition вам в помощь.

Comments

[cker]

Это ведь придется на js зацикливать анимацию с использованием timeout-ов. Разве это легче получится?

[Roman Khegay]

cker,

.header .img.img-1 {
  background: url("1.svg") repeat-x right bottom / 4571px 608px;
  height: 608px;
  width: 9142px;
  bottom: 0;
  animation: loop 30s infinite linear;
transition: all 0.15s linear;
}

.header .img.img-2 {
  background: url("2.svg") repeat-x right bottom / 4575px 488px;
  height: 488px;
  width: 9150px;
  bottom: 104px;
  animation: loop 35s infinite linear;
transition: all 0.15s linear;
}

[cker]

Честно сказать никаких изменений.

[Roman Khegay]

cker, Дайте полный код, пожалуйста

[cker]

Вот здесь архив со всей анимацией. https://drive.google.com/file/d/1iMuIN3v2qR4Mhphq6...
Свойство о котором вы говорили в images/style.css в строке 34

[Roman Khegay]

cker, протестил страницу, понял о чём вы говорите. К сожалению, это не в коде дело. Тут даже простая анимация будет подергиваться. Всё дело в использовании процессора и рендера через графическую карту. На таймлане нет просадок сильных в кадрах, в хроме держится на. 54-62 кадрах в секунду.

Вы можете попробовать повторить: откройте вкладку с анимацией, переключитесь на другую вкладку, подождите 5-10 секунд и переключитесь обратно:
- Вы смотрите вкладку с анимацией
- переключаетесь на другую вкладку (позиция картинки -10px), в этот момент браузер не производит анимацию
- вы смотрите на другую вкладку 5-10 секунд (в той вкладке такая же позиция картинки -10px)
- вы переключаетесь обратно (время анимации не останавливалось, а позиция сместилась на -100px)
- браузер пытается восстановить порядок и резко перекидывает позицию картинки с -10px до -100px
- визуально это выглядит как резкий прыжок

Вот такие маленькие прыжки происходят на слабых ПК, просто время простоя маленькое

[Roman Khegay]

cker, Один из вариантов, который возможен:
К .header добавить:

backface-visibility: hidden;
perspective: 1000;

А к .header .img:
will-change: transform;

[Roman Khegay]

cker, вот вам статья для изучения

[cker]

Спасибо за подсказки!