Как создать gif анимацию, имея html/css анимацию?

Question

[Иван Желудков]

Есть у меня вот такая анимированная иллюстрация на html/css без использования изображений.
Я сам сижу в хроме и соответственно, когда верстал сверял в хроме. Потом понял, что добавление префиксов для других браузеров не решит проблему кроссбраузерности, так как увидел картинку в firefox.
Для сравнения вот отображение в Chrome и Firefox.



Даже если не брать в расчёт то, что в Firefox одна из важных анимаций на иллюстрации не работает, несколько элементов отображаются совсем некорректно.
Но вопрос состоит не в адаптивной вёрстке. Я понял, что вряд ли осилю сверстать несколько таких анимаций для каждого браузера.

Вопрос:
Мне нужно каким-то образом записать эту анимацию и создать gif картинку с этой анимацией, чтобы она идеально отображалась даже в Firefox.
Подскажите с помощью какого софта можно сделать это, никогда раньше не работал с gif.
Или если у вас есть другие предложения, пишите.

Comments

[Иван Желудков]

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

[Иван Желудков]

Тестировал анимацию
Chrome - Делал под него, поэтому всё работает идеально.
Firefox - Был немного шокирован тем, что многие элементы некорректно отображались.
IE - На удивление была лишь одна неточность, которую можно легко исправить, в остальном анимация работала как надо.
Opera - Анимация работает, как будто бы я верстал под Оперу, был очень удивлён.
Если у вас анимация работает не правильно, сообщите пожалуйста какой у вас браузер.

Answer 1

[Артём Зубков]

1. Можно попробовать решить проблему css хуками.
2. Для снятия gif можно воспользоваться допустим программой GifCam
3. Ну а также можно сделать gif в Gimp 2. Вот урок

Comments

[Иван Желудков]

Что за CSS хуки? За Gifcam спасибо, вроде бы полезная программа и пригодится мне.

Answer 2

[Юрий Ярош]

Ну в IE9+ проблем нет.
Возможно вам будет проще анимировать SVG.
Есть bonsaijs и другие либы.

Comments

[Иван Желудков]

Насколько сложно реализовать эту же анимацию на SVG? Её нужно переделывать заново? Я тут подумал, раз в IE работает, то скорей всего и в Oper-е должно. Нужно только заточить под Mozill-у. Так что вполне реально, что сделаю разный css под разные браузеры.

[Иван Желудков]

И касаемоbonsai.js, я могу попросить какого-нибудь JS программиста, чтобы он из моей css анимации сделал js? То есть этот "либ" корректно будет отображаться во всех браузерах, так?

[Юрий Ярош]

http://bonsaijs.org/ http://www.svgjs.com/ http://snapsvg.io/ http://raphaeljs.com/ Анимацию в JS нужно пилить вручную через Motion Tween'ы, т.е. это довольно сложно. По поводу совместимости: у raphael'я просто замечательная совместимость - Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+. Правда он прожорлив по ресурсах так как использует очень специфические методы отрисовки. Вот у бонсая и snapsvg Chrome 20+, Safari 5+, Firefox 18+, IE 9+, Opera 12+. Т.е. они не эмулируют SVG так как это делает raphael и им нужна нативная поддержка в браузере. CSS анимации на сегодняшний день работают достаточно плохо в большинстве современных браузеров. Есть большие проблемы с сглаживанием... Даже WebGL работает лучше) Советую не смотреть в сторону CSS анимаций ближайшие года полтора. SVG вполне хватает, и он вполне зрелая замена большинству графики на сайтах.

[Иван Желудков]

Проблема в том, что я не умею создавать анимации в SVG, насколько дорогие подобные услуги? Например в моём случае. Что выгоднее сделать, по цене.

[Юрий Ярош]

Я не знаю сколько подобное будет стоить, но думаю с учётом количества дилетантов дело совсем не в стоимости. Возможно вам будет проще и быстрее самому разобраться.

[Иван Желудков]

Тогда какой из вариантов посоветуешь. Так как css анимаций на странице порядка 5-8. Не все такие же сложные. Но анимация есть везде.

[Юрий Ярош]

Если нужна хорошая совместимость - raphaeljs Если нет - bonsaijs Skype d00mko

Answer 3

[Степан]

Записать изображение с экрана в GIF-файл легко можно с помощью ScreenToGif.
Продолжительность и порядок кадров легко можно менять с помощью встроенного редактора.