webvany
@webvany
Дизайнер

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

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

image.png

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

Вопрос:
Мне нужно каким-то образом записать эту анимацию и создать gif картинку с этой анимацией, чтобы она идеально отображалась даже в Firefox.
Подскажите с помощью какого софта можно сделать это, никогда раньше не работал с gif.
Или если у вас есть другие предложения, пишите.
  • Вопрос задан
  • 11949 просмотров
Решения вопроса 2
artzub
@artzub
Программист
1. Можно попробовать решить проблему css хуками.
2. Для снятия gif можно воспользоваться допустим программой GifCam
3. Ну а также можно сделать gif в Gimp 2. Вот урок
Ответ написан
Ну в IE9+ проблем нет.
Возможно вам будет проще анимировать SVG.
Есть bonsaijs и другие либы.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Записать изображение с экрана в GIF-файл легко можно с помощью ScreenToGif.
Продолжительность и порядок кадров легко можно менять с помощью встроенного редактора.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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