Так что давайте скажем, что у меня есть страница с анимированным элементом слева от свойства. Если я просто добавлю translateZ нуля, достаточно ли этого, чтобы заставить аппаратное ускорение на мобильных устройствах? Получу ли я что-нибудь с точки зрения аппаратного ускорения/GPU, используя translateX вместо левой?Включает ли translate3d аппаратное ускорение или только переводить свойства?
Я нашел ответ - он только ускоряет свойства преобразования, а не остается. Вот примеры скриптов для демонстрации.
Сочетание левого и переведенногоZ - его изменчивое на мобильном телефоне Сочетание translateX и translateZ - его гладкое!
Прежде всего, я хотел бы отметить, что translateZ (0) не является кросс-браузерным решением для сглаживания анимаций с помощью ускорения GPU, а ускорение GPU не следует использовать беззаботным, поскольку это довольно дорого.
Этот факт, когда он работает, не будет работать только для перевода свойств, поэтому - это да, он работает для всех свойств.
В вашем примере вы можете ясно видеть улучшение использования перевода вместо левого, потому что перевод не запускает макет (заставляя вашу страницу пересчитывать позиции элементов) в каждом кадре. Имейте в виду, что использование легкого свойства, такого как , переводит, чтобы анимировать элемент, имеет гораздо большую производительность, чем использование дорогого с ускорением GPU.
Вы можете найти на css trigger, где свойства дешевле анимировать.