Как побороть замыленность и дрожание блоков при анимации CSS3?

Question

[Александр Аубакиров]

Можно ли как-то избавиться от замыленности и дрожания блоков и текста при анимации (transition, animation). Особенно если эти блоки имеют свойства skew и rotate?

Если родитель имеет skew или rotate то вся анимация будет замыливать дивы, шрифты и т.д. внутри.

Можно с этим как-то бороться?

Answer 1

[Дмитрий Христоев]

попробовать will-change - https://dev.opera.com/articles/ru/css-will-change-...

Comments

[Александр Аубакиров]

Хм, это интересно. Изучу

Answer 2

[Алексей Струков]

Там проблема в том, что при 3d анимации браузер начинает задействовать gpu. От этого происходит дерганье. Чтобы этого избежать, надо заранее применить к этому элементу трансформацию, чтобы при загрузке страницы он уже был отрендерен через gpu и этот переход не происходил во время начала анимации и конца. Можно сделать это например через свойство transform: translateZ(0); которое должно стоять у элемента, который мы собираемся трансформировать в будущем.

Comments

[Александр Аубакиров]

nim.am-work.ru/#activepred - вот допустим если наводить на блоки, они ведут себя не нормально. Может есть иной способ вывода анимации

[Алексей Струков]

Александр Аубакиров: а в чем ненормальность заключается?
То что квадраты увеличиваются и сдвигаются вправо это так и задумано?

[Александр Аубакиров]

Алексей Струков: при наведении на любой из блоков, все блоки потрясывает на 1пикс пимерно.

[Алексей Струков]

Александр Аубакиров: попробуйте сделать анимацию на ховере у черных блоков через transform: scale();
Еще там заметил несколько косяков с блоками.
.pr_item надо поставить box-sizing: border-box и на ховере убрать width: 88.5% и padding: 30px
Но это все капля в море. Там по хорошему много чего менять надо.

[Александр Аубакиров]

Алексей Струков: Да, продолжу копаться. Я проценты переписал в px, вроде чуть лучше...

Answer 3

[Денис Букреев]

для шрифтов я применяю сглаживание
про замыленные дивы впервые слышу

Comments

[Дмитрий Христоев]

Макс Минимус: caniuse.com/#search=font-smooth

Answer 4

[Владимир]

Мало данных.
Может обычный pointer-events: none поможет)

Comments

[Александр Аубакиров]

nim.am-work.ru/#activepred - вот тут на блоки если наводить, можно заметить как они гуляют на 1px

[Владимир]

Подозреваю, что проблема в том, что какие-то параметры указаны в %

[Владимир]

Попробуйте переписать с box-sizing border-box

[Владимир]

Также может помочь универсальный хак transform: translateZ(0)

[Александр Аубакиров]

Владимир: да, попробую все перевести в пикселы, но вот проблема с замылеванием я смотрю присутствует даже у сайтов на awwwards.com =) видимо тут уж нужно svg или канвас

[Александр Аубакиров]

Владимир: transform: translateZ(0) к какому элементу? непосредственно к анимируемому?