Почему дергаются изображения при hover с использованием transform и transition?

Question

[Igor Z.]

Обратил внимание, что при наведении на изображения они как бы подергиваются (особенно заметно в самом конце эффекта).
При этом, при тестировании с localhost все работает корректно, без подергиваний.
Тестировал на Chrome и FF.
Подскажите, пожалуйста, в чем может быть проблема и как ее решить?

Часть кода:

img {
  width: 150px;
  height: 150px;
  position: absolute;
  transform: rotate(-45deg);
  box-shadow: 0 0 0 4px white;
}
img:hover {
  width: 300px;
  height: 300px;
  z-index: 10;
  transform: rotate(0deg);
  transition: 2s;
}

Спасибо!

Comments

[Алексей]

codepen.io/anon/pen/redzoV - иногда подергивается, иногда нет. Видимо особенности реализации, зависит от текущей нагрузки и параллельных процессов.

Answer 1

[Dan_Zakirov]

will-change: transform; - ознакомьтесь с этим свойством, реально решает проблему.

Comments

[Сергей]

не решает(

Answer 2

[Радость моя]

Вообще они могут дергаться из за того что во время анимации у них промежуточное состояние со своими значениями, а по завершении - финальное, и значения параметров на конец анимации могут на 0.000х отличаться, и последним действием идет "подгон" промежуточного до финального значения. Должно помочь небольшая корректировка времени.

Comments

[Igor Z.]

Попробовал корректировать время в промежутке от 1 до 3s.
К сожалению, в каждом случае видно "подрагивание".

Answer 3

[Ксения Михайлова]

Возможно, что это происходит из-за изменения размеров. Попробуйте менять размер через scale:

img {
  width: 300px;
  height: 300px;
  position: absolute;
  transform: rotate(-45deg) scale(0.5);
  box-shadow: 0 0 0 4px white;
}
img:hover {
  z-index: 10;
  transform: rotate(0deg) scale(1);
  transition: 2s;
}

Comments

[Igor Z.]

Ксения, спасибо за отличный совет, но не помогло.

Склоняюсь, что Алексей отписавшийся выше - прав.
Сегодня открывал ссылку на другом (более мощном) ПК на котором анимация была значительно более плавная, без дрожи.
После открытия нескольких ресурсоемких приложений изображения стали дрожать как листья на осеннем ветру :)

[Ксения Михайлова]

Igor Z.: о, раз уж вы так активно тестируете (и вылавливаете это дрожание), попробуйте еще на типе анимации ease-in - он ускоряется к концу. Уже стало интересно.

[Igor Z.]

Ксения Михайлова: Спасибо за совет! Выяснилась интересная особенность - если добавить transition-timing-function: ease-in; то дрожание появляется в начале анимации, но завершается эффект плавно.
При этом если дополнительно снизить transition до 1.5s - дрожание попадает на момент разворачивания / увеличения изображения и практически незаметно.

Также, выложил архив со страницей и изображениями - если вы (или кто то еще) захотите потестировать самостоятельно :)

Спасибо!

[Igor Z.]

И, конечно же, я забыл добавить ссылку - time-to-web.ru/02/zip/tatoo_preview.zip