Почему переходы для некоторых свойств CSS медленны, и ни один свободный

Я провел бой 4 часа после простого перехода с приемлемой производительностью:

Сначала я пробовал этот код:

left: 2000px;
-webkit-transition: left 1s linear;
-moz-transition: left 1s linear;
-ms-transition: left 1s linear;

Результат был ужасен на Chrome v21.0.1180.89 и FireFox v15.0.1, но был отличным в IE10. Я захватил график использования процессора и графического процессора и обнаружил, что хром не использует GPU для базовых свойств css, Что такое решение для современных браузеров?

Ответ 1

В результате моих 4-часовых экспериментов лучше использовать преобразование, как показано ниже:

        -webkit-transform: translate(2000px, 0);
        -webkit-transition: -webkit-transform 1s linear;
        -moz-transform: translate(2000px, 0);
        -moz-transition: -moz-transform 1s linear;
        -ms-transform: translate(2000px, 0);
        -ms-transition: -ms-transform 1s linear;

Это было отлично на IE10, Chrome v21.0.1180.89 и FireFox v15.0.1.

Примечание: IE9 не поддерживает tarnsforms

Ответ 2

Не используйте свойства left или top, bottom, margin или padding для перемещения элементов, но только "transform: translate".

Таким же образом, для изменения размеров элементы вместо высоты или ширины используют только "transform: scale".

Параметры слева, сверху, снизу, поля, отступов, высоты, ширины (и многих других) заставляют браузер пересчитывать все макеты, поэтому геометрия многих элементов с большим количеством работы процессора.

Каждое свойство имеет разный вес, в этой статье он четко объясняется высокопроизводительные анимации

Edit1: triggers.com кажется хорошей страницей, если вы не помните каждый вес свойства