Почему это преобразование не использует преимущества gpu (или использует)?

#html #css #animation

#HTML #css #Анимация

Вопрос:

Я изучал Уилла Бойда и его выступление с гладкой анимацией на css conf.

Теперь пытаюсь повторить это без какого-либо успеха (или, по крайней мере, я думаю). При использовании transform предполагается использовать преимущества графического процессора, поэтому в devtools он не должен отображаться как рендеринг при выборе опции «рендеринг / рисование», но это так. Есть идеи?

Сравнение примеров Уилла
плохая рыба
хорошая рыба

В моем примере
разница в css заключается в следующем: полный код и демонстрация на codepen

 @keyframes bad-gpu {
    0%, 100% { left: 0px; }
    50% { left: 400px; }
}

@keyframes good-gpu {
    0%, 100% { transform: translateX(0px); }
    50% { transform: translateX(400px); }
}

1. Способен ли ваш браузер использовать аппаратное ускорение с вашим графическим процессором?

2. Да, MacBook pro «late 13» с использованием Chrome, также пример Уилла работает просто отлично, не показывает мигание краски.

3. Перейдите chrome://gpu и проверьте аппаратное ускорение

4. @Oriol доступны все варианты, кроме растеризации «только программное обеспечение», но я читал, что это только для Chromium / Android? Также, как я упоминал ранее, пример, который будет работать нормально.

Ответ №1:

Анимации CSS не ускоряются автоматически с помощью GPU. Они выполняются механизмом рендеринга браузера. Но если мы указываем анимацию с помощью transform или translate3d, то браузер использует GPU для рендеринга графики, что является более производительным.