ogarich89
@ogarich89
Front-End Developer

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

Подскажите как вы оптимизируете анимацию 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
  • Вопрос задан
  • 285 просмотров
Решения вопроса 2
kn1ght_t
@kn1ght_t
не нужно анимировать позиционирование, анимируйте через transform translate
Ответ написан
ogarich89
@ogarich89 Автор вопроса
Front-End Developer
А вот и ответ, друзья!

.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)
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
IonDen
@IonDen Куратор тега CSS
JavaScript developer. IonDen.com
Не нужно ничего анимировать в старых браузерах. Там эффекты должны быть просты, вкл/выкл. Никаких промежуточных анимаций. У людей и так все тормозит, древние компы едва тянут современные сайты, а тут еще анимация. Гвоздь в гроб.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы