Tailwindcss 动画 + nextjs：图像淡入效果只运行第一次然后停止

Question

我正在尝试为直接导入（即 import img1 from './picture-1.jpg' 等）到我的 nextjs 组件的一系列图像创建从一个图像到另一个图像的平滑图像过渡（淡入）。 该组件应该是一个大图像横幅。我希望它自动交换图像。

到目前为止我所拥有的大部分有效的片段：

...
...
  useInterval(nextImage, 5000)

  const bgImage = `url(${images[index]})`

  return (
    <div
      className="animate-slowfadein w-full bg-cover bg-center h-80"
      style={{ backgroundImage: bgImage }}
    ></div>
  )
...

图像旋转有效，但我注意到动画仅在第一次安装组件时有效。在那之后，它一直是突然的过渡。如何让每张图片始终淡入？