I'm doing a page transition using Framer Motion.

In dev mode it's working fine. But when I use build and start, it seems like Next.js is removing the styles of my CSS Modules at the start of my animation, and my page styles go haywire.

Does anybody know how to get around this?
Is it possible to delay the removal of CSS by Next.js on route change?

I'm using a very simple page transition defined in _app.tsx:

<AnimatePresence mode='wait'>
  <motion.div
    key={router.pathname}
    initial='pageInitial'
    animate='pageAnimate'
    exit='pageExit'
    variants={{
      pageInitial: {
        opacity: 0,
      },
      pageAnimate: {
        opacity: 1,
        transition: { duration: 1 },
      },
      pageExit: {
        opacity: 0,
        transition: { duration: 1 },
      },
    }}
  >
    {children}
  </motion.div>
</AnimatePresence>