這個(gè)問題的沙盒在這里——https://codesandbox.io/p/sandbox/nervous-leaf-wblzxc

當(dāng)我在自定義css中使用幀運(yùn)動(dòng)動(dòng)畫時(shí)

// https://prismic.io/blog/nextjs-accessibility#:~:text=nowrap%3B%0A%7D-,Reduced%20motion,-Due%20to%20a
@media (prefers-reduced-motion: reduce) {

  // https://css-tricks.com/revisiting-prefers-reduced-motion/
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important; // Hat tip Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170)
    transition-duration: 0.001ms !important; // SPECIFICALLY THIS LINE
  }
}

我啟用了減少運(yùn)動(dòng)，幀運(yùn)動(dòng)動(dòng)畫& quotflash & quot。Chrome和Edge不閃，而Firefox和Safari閃。

要查看& quotflash & quot

啟用減少運(yùn)動(dòng) 去Firefox中的沙盒(也可能是Safari，沒有在那里測(cè)試過) 將鼠標(biāo)懸停在第二個(gè)框上