Есть следующая задача: html страницу с анимацией нужно преобразовать в видео.
Делаю так: С помощью phantomjs делаю снимки страницы через каждые 25мс, а потом с помощью ffmpeg склеиваю это все в видео.
Такой механизм работает нормально.
НО, столкнулся с проблемой, что phantomjs (точнее движок браузера, который он использует) не поддерживает css transaction.
То есть, например, блок
.headline
, должен плавно появляться:
js:$('.headline').css('opacity', 1);
css:.headline {
position: absolute;
top: 773px;
left: 53px;
opacity: 0;
-o-transition: ease-in 0.6s;
-moz-transition: ease-in 0.6s;
-ms-transition: ease-in 0.6s;
-webkit-transition: ease-in 0.6s;
transition: ease-in 0.6s;
}
Но transition не срабатывает и переход не плавный, а блок появляется без плавного перехода.
Следовательно вопрос, как этого можно избежать в phantomjs?
Или же, возможно, кто-то подскажет другие инструменты для реализации поставленой задачи?