CSS transitions not visible when screen-recording using Puppeteer

I have a page where lots of large images are being resized and moved around and I am using CSS transitions for all of these actions.

When I run the page on the browser everything is working fine.

The transitions are sometimes a bit bumpy but it’s understandable given the size of the images and the large quantity so I can live with that.

However, I’m now trying to use puppeteer (headless) combined with the puppeteer-screen-recorder module and when I look at the resulting video, there are no transitions.

import puppeteer from 'puppeteer'
import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder'

const defaultViewport = {
  width: 1440,
  height: 764
}

;(() => {

  const browser = await puppeteer.launch({ defaultViewport })
  const page = await browser.newPage()
  const recorder = new PuppeteerScreenRecorder(page, {
    videoFrame: defaultViewport,
    aspectRatio: '360:191'
  })

  async function stop() {
    await recorder.stop()
    await browser.close()
    process.exit(1) 
  }

  await page.setDefaultNavigationTimeout(0)

  await page.exposeFunction('onAnimationsDone', async () => {
    stop()
  })

  await page.exposeFunction('onAnimationsStarted', () => {
    recorder.start('./client/db/test.mp4')
  })

  await page.goto('http://localhost:8000/')

})()

Is this an unavoidable limitation of using headless puppeteer or am I doing something wrong ?