Почему анимация в хроме тормозит?

Question

[Stepan S.]

Пруф: codepen.io/miloslovesky/pen/Ilcwn

Корректную работу анимации можно увидеть в Файрфоксе

Answer 1

[Евгений Петров]

Достаточно быть попроще в описании анимации.
jsfiddle.net/q0htgx0f

@-webkit-keyframes test {
	0% {
		-webkit-transform: scale(.3);
		opacity: 0;
	}
	50% {
		-webkit-transform: scale(1.15);
	}
	90% {
		-webkit-transform: scale(.98);
	}
	100% {
		-webkit-transform: scale(1);
		opacity: 1;
	}
}
@keyframes test {
	0% {
		transform: scale(.3);
		opacity: 0;
	}
	50% {
		transform: scale(1.15);
	}
	90% {
		transform: scale(.98);
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}
.modal-animation-spring {
	-webkit-animation: test .5s;
	animation: test .5s;
}

Comments

[Stepan S.]

В конце концов тоже пришёл к этому выводу, только так и не поняв почему хрому не нравится 2 анимации (кстати если убирать задержку у второй анимации для вебкита, то работает без торможения, но это какой-то грязный трюк)

[Stepan S.]

И спасибо большое

Answer 2

[Андрей Ежгуров]

Тормозит потому, что ты изобретаешь собственный велосипед. Зачем? Существует множество библиотек, которые нормально работают во всех браузерах. Зайди, например, на http://jquery.page2page.ru/index.php5/Эффекты и посмотри, как это реализовано в jQuery.

Comments

[Stepan S.]

Это смешно. Во первых как это может быть велосипедом, если анимации есть в спецификации. Во вторых где тот скрипт, который делает scale

[Андрей Ежгуров]

Смешно то, что до тебя не доходит. Зайди на сайт плагина Fancybox, который в интернете на каждом углу используется ( fancybox.net ) и в разделе Example щёлкни по второй картинке (elastic). После этого взгляни в правом верхнем углу страницы на дату релиза последней версии плагина.

То, что ты пытаешься изобрести, создано много лет назад.

[Stepan S.]

То что «я пытаюсь изобрести» уже изобретено и работает некорректно в хроме. Моя задача: найти ошибку или решение проблемы

[Андрей Ежгуров]

Я дал ссылку на плагин, который много лет используется на огромном количестве сайтов во всём мире. Который полностью реализует нужный тебе функционал и нужную тебе анимацию. Который нормально работает во всех браузерах. И для использования которого не требуется простыня самописного JS-кода.

А до тебя всё ещё не доходит.

[Евгений Петров]

@eandr_67 вопрос звучит «Почему анимация в хроме тормозит?», что означает — человек хочет разобраться в том, что делает, а вы наседаете со своими советами всенепременно использовать плагин.

[Андрей Ежгуров]

To @Petroveg. Прежде чем делать самому, имеет смысл посмотреть, как сделано у других. Чтобы не задавать потом вопросы «Почему анимация в хроме тормозит?».

[Евгений Петров]

@eandr_67 то есть вы не знаете, в чём причина, верно?)

[Андрей Ежгуров]

Ну вот, пошли аргументы "сам дурак". :) Очень сомневаюсь, что Вы сами стали разбираться в предложенной мешанине CSS и JS.

Что касается моего опыта, то прежде чем писать собственный JS-слайдер, я сначала попытался найти аналог с нужным функционалом. Потом, когда ничего, удовлетворяющего заказчика-перфекциониста, не нашлось, серьёзно покопался в потрохах нескольких слайдеров - чтобы понять используемые там алгоритмы. И только после этого стал писать собственный вариант.

[Евгений Петров]

Вы ошибаетесь.

[Евгений Петров]

@eandr_67 вы предлагаете решения, основанные на JS. А человек пытается сделать решение, основанное на animation. Разницу понимаете?

Answer 3

[Алексей Чернышев]

В хроме в принципе какие-то проблемы с transition и animation.

Если долго не выключать браузер, он начинает жутко тормозить с css анимацией.

Сам с этим столкнулся недавно. Саму проблему так и не решил пока. Из-за чего именно тормозит. Если перезагрузить компьютер - все работает быстро и плавно.

Answer 4

[numfin]

Сейчас ресайзил свой хром на сайте. Жутко тормозил. Зашел в этот тред. Спустя час увидел лишний горизонтальный скролл, добавил media (max-width на 50 пикселей больше, чтобы скролл не успевал появляться, так тормоза исчезли. Если интересно )