AubakirovAlex
@AubakirovAlex
Дизайнер и фронт-эндер

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

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

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

Можно с этим как-то бороться?
  • Вопрос задан
  • 1959 просмотров
Пригласить эксперта
Ответы на вопрос 4
pm_wanderer
@pm_wanderer
junior-HTML
Там проблема в том, что при 3d анимации браузер начинает задействовать gpu. От этого происходит дерганье. Чтобы этого избежать, надо заранее применить к этому элементу трансформацию, чтобы при загрузке страницы он уже был отрендерен через gpu и этот переход не происходил во время начала анимации и конца. Можно сделать это например через свойство transform: translateZ(0); которое должно стоять у элемента, который мы собираемся трансформировать в будущем.
Ответ написан
для шрифтов я применяю сглаживание
про замыленные дивы впервые слышу
Ответ написан
ruvasik
@ruvasik
https://www.bryce.ru
Мало данных.
Может обычный pointer-events: none поможет)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы