Framer Motion结合自定义CSS开启减少动效时在Firefox/Safari闪烁

Sandbox链接

当我把Framer Motion动画和自定义CSS一起使用时，开启系统的「减少动效」设置后，Firefox和Safari中会出现动画闪烁的问题，但Chrome和Edge没有这个现象。

我的自定义CSS代码如下：

// 参考prismic.io的Next.js无障碍指南
@media (prefers-reduced-motion: reduce) {

  // 参考css-tricks的减少动效文章
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; // 参考Nick/cssremedy的评论
    transition-duration: 0.001ms !important;
  }
}

其中**transition-duration: 0.001ms !important;这一行是问题的根源**。

复现闪烁现象的步骤：

• 开启系统的「减少动效」设置
• 在Firefox（或Safari）中打开上述Sandbox
• 将鼠标悬停在第二个盒子上

内容的提问来源于stack exchange，提问作者IDrumsey