GPU ускорение анимированных и размыто содержание

Question

Вопрос: Почему мой процессор зарегистрировать ~ 30% когда размытие применяется против ~ 6%, когда нет размытости не применяется к анимированному объекту?

Деталь:

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

стилей CSS файл выглядит следующим образом:

animation-name: rise; 
animation-fill-mode: forwards; 
animation-timing-function: linear; 
animation-iteration-count: 1; 
-webkit-backface-visibility: hidden; 
-webkit-perspective: 1000; 
-webkit-transform: translate3d(0,0,0); 

transform: translateZ(0); 

ширина, высота и размытие применяется рядный с помощью style атрибута.

<div class="foo" style="width:99px;height:99px; 
         filter:blur(2px); 
         -webkit-filter:blur(2px) opacity(0.918866247870028); 
         -moz-filter:blur(2px) opacity(0.918866247870028); 
         -o-filter:blur(2px) opacity(0.918866247870028); 
         -ms-filter:blur(2px) opacity(0.918866247870028);"></div> 

С размытым включением использование моего процессора составляет ~ 30%. Когда я отключу размытие, загрузка процессора снижается до ~ 6%.

Что здесь происходит? Является ли хром только способным ускорять GPU, когда не применяется размытие? Если да, то почему?

Update 1:

анимация rise выглядит следующим образом:

@keyframes rise { 
    0% { 
     transform: translateY(0px); 
    } 
    100% { 
     transform: translateY(-1000px); 
    } 
} 

Answer 1

Не размывать его в встроенных стилей. Поместите размытие в файл стиля.

Answer 2

Я не думаю, что размытие на самом деле вызывает проблемы, похоже, делает его более заметным, чем раньше. Проблема в том, что transform: translateY в вашей анимации перезаписывает transform: translateZ(0), который вы используете для принудительного ускорения GPU.

Это график записи для кода вы работаете прямо сейчас, заметьте, как есть вся эта деятельность по основным и растровой резьбы:

Теперь сравните это с записью, где я применяется will-change: transform к .foo:

Нет активности на основной и растр вообще.

Там в два этапа применения этого исправления:

1. Применить will-change: transform к .foo. Это позволит браузеру знать, что вы намереваетесь изменить это свойство и заставить его отобразить этот элемент на графическом процессоре для его учета.

2. Нет версий поддержки Edge и IE will-change на данный момент. Поэтому мы будем использовать transform: translate3d(0, -1000px, 0); в анимации для ускорения GPU. Обратите внимание, что это взломать, поэтому мы обнаружим поддержку для will-change и используем transform: translateY в браузерах, которые ее поддерживают.

Окончательный код:

@keyframes rise { 
    0% { 
     transform: translate3d(0, 0, 0); 
    } 
    100% { 
     transform: translate3d(0, 1000px, 0); 
    } 
} 

@supports (will-change: transform) { 
    @keyframes rise { 
     0% { 
      transform: translateY(0px); 
     } 
     100% { 
      transform: translateY(1000px); 
    } 
    } 
} 

div { 
    width: 100px; 
    height: 100px; 
    background: #f00; 
    animation: rise forwards 2s linear infinite; 
    will-change: transform; 
} 

Смотрите здесь для рабочей версии: http://jsbin.com/mosuvikoto/edit?html,css,output