Why does css animation (transition) not work when scraping a site using phantomjs?

Question

PhantomJS

There is the following task: an html page with animation needs to be converted into a video.
I do this: With the help of phantomjs I take pictures of the page every 25ms, and then with the help of ffmpeg I glue it all into a video.
This mechanism works well.
BUT, I ran into a problem that phantomjs (more precisely, the browser engine that it uses) does not support css transaction.
That is, for example, the block .headlineshould appear smoothly:
js: css:
$('.headline').css('opacity', 1);

.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;
}

But the transition does not work and the transition is not smooth, and the block appears without a smooth transition.
Hence the question is how can this be avoided in phantomjs?
Or, perhaps, someone will suggest other tools for the implementation of the task?