Как оптимизировать анимацию css3 на старых устройствах?

Question

[Роман Огарков]

Подскажите как вы оптимизируете анимацию CSS3 для старых мобильных устройств.

Ужасно тормозят эффекты выезжающего меню

.quest-aside
	position: fixed
	top: 87px
	bottom: 0
	width: 310px
	left: -310px
	z-index: 10001
	background-position: center -89px
	+transition-property(left)
	+transition-duration(1s)
	overflow: auto
	&.active
		left: 0

Answer 1

[kn1ght_t]

не нужно анимировать позиционирование, анимируйте через transform translate

Answer 2

[Роман Огарков]

А вот и ответ, друзья!

.quest-aside
	position: fixed
	top: 87px
	bottom: 0
	width: 310px
	left: 0
	z-index: 10001
	background-position: center -89px
	+transition-duration(1s)
	-webkit-transform: translate3d(-100%, 0, 0)
	transform: translate3d(-100%, 0, 0)
	overflow: auto
	&.active
		-webkit-transform: translate3d(0, 0, 0)
		transform: translate3d(0, 0, 0)

Answer 3

[Денис Инешин]

Не нужно ничего анимировать в старых браузерах. Там эффекты должны быть просты, вкл/выкл. Никаких промежуточных анимаций. У людей и так все тормозит, древние компы едва тянут современные сайты, а тут еще анимация. Гвоздь в гроб.

Answer 4

[shell1989]

анимируйте через transform translate