Opera: проблемы с CSS3 keyframe animation?

Question

[dotsquid]

Решил реализовать почти всю анимацию с помощью CSS3, а не jQuery.



Хром, ФФ, ИЕ10 порадовали стабильной работой (особенно ИЕ10 — очень приятно удивил). Опера же в очередной раз разочаровала своими необъяснимыми заскоками.



Вот небольшой пример jsfiddle.net/3nnRg/1/



Все вышеупомянутые браузеры отображают плавно расходящиеся концентрические окружности. Опера же в определенный момент решает, что окружностей и так достаточно и не обязательно их все анимировать, поэтому она просто останавливает анимацию на 100% и на начальный кадр анимации не возвращается, несмотря на animation-duration infinite. При чем анимировать она может не все аттрибуты: чаще всего окружность застывает с максимальным размером и opacity = 1.0, хотя прозрачность должна уменьшаться до 0.0. В случае если в анимации указаны не два кадра (0% и 100%), а больше (например, 0% 80% 100%), то может застрять на каком-то из промежуточных.



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



Был уверен, что раз анимация в Опере реализована более года назад, да еще и поддерживается сейчас без вендорных префиксов, то все будет работать корректно. Ан-нет. Теперь просто непонятно, что делать. Делать fallback на jQuery очень не хотелось, так как теряется вся суть затеи.



Кто-нибудь вообще с таким сталкивался, и если да, то как решали и решили ли?

Answer 1

[egorinsk]

Справедливости ради, проблемы с обновлением картинки на экране были у Оперы еще много лет назад, например, в анимированных яваскриптом меню. Видимо их движок лучше заточен под статичные страницы.

Но с вашей стороны как-то странно полагаться только на новую, сырую технологию, не используя фолбеков для более старых браузеров. Решением будет добавить поддержку классических яваскрипт-анимаций.

> Делать fallback на jQuery очень не хотелось, так как теряется вся суть затеи.

Разве это сложно?

Также, замечу, что CSS анимации имеют свойство грузить процессор, включать вентиляторы и сажать батарейку. Хотя тот же флеш умеет то же самое и даже больше без такой нагрузки. Вы рискуете делать тормозной и дергающийся сайт. В сети полно анимаций, которые не то что 60, 30 fps не выжимают.

Comments

[dotsquid]

Моей целью как раз и было максимально дистанцироваться от анимаций на Javascript, где это возможно и целесобразно, т.к. получается, что буква V из аббревиатуры MVC равномерно размазывается и по CSS, и по Javascript. Хотелось бы оставить ее в одном месте.
Ну и как бы, нормальная реализация CSS3 анимации и прочих печенек должна использовать аппаратное ускорение GPU, а не CPU. Не говоря уже о том, что всё упомянутое реализуется нативно на низком уровне и не может (во всяком случае, не должно) быть медленнее аналогов на Javascript.