transform: translateX vs переход по левому свойству. У кого лучшая производительность? CSS

Я создаю слайд-меню с HTML и CSS3 - особенно переходы.

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

//option 1
.animate{
    -webkit-transition:all ease 0.3s;
    -webkit-transform:translateZ(200px);
}

//option 2
.animate{
    -webkit-transition:all ease 0.3s;
    left:200px;
}

благодаря

Ответы

Ответ 1

Переходы через перевод выполняют MUCH лучше на мобильных устройствах!

Редактировать: Вот живая демонстрация. Переходы с translateX и translateY намного более плавные, чем top, bottom, left и right. jsFiddle Демо для мобильных устройств