CSS 动画过渡不适用于 Firefox

Posted 2023-03-06

【中文标题】CSS 动画过渡不适用于 Firefox

【英文标题】：CSS Animation transition does not work on Firefox

【发布时间】：2021-09-27 07:24:47

【问题描述】：

我正在尝试创建幻灯片作为背景，但它在 Firefox 中不起作用。图像发生变化，但没有指定的过渡。

.main-page 
  width: 100%;
  height: 100vh;
  animation: animate 15s ease-in-out infinite;
  -webkit-animation: animate 15s ease-in-out infinite;
  -moz-animation: animate 15s ease-in-out infinite;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
  background-size: cover;


@keyframes animate 

  0%,
  100% 
    background-image: url(/img/001.jpg);
  

  50% 
    background-image: url(/img/002.jpg);
  

检查检查器，我可以看到以下内容处于活动状态：

-webkit-animation: animate 15s ease-in-out infinite;

我做错了什么？

谢谢。

【问题讨论】：

您好，我不清楚您期待什么过渡。你想让图像淡入淡出吗？

是的，图像应该淡入/淡出。它在 chrome 中工作。

【参考方案1】：

似乎 FF 和 Chrome 对背景图像之间的动画的解释不同。 Chrome 不断淡出一个，同时淡入下一个（与背景颜色一样），但 FF 只显示一个，然后显示另一个。

对于问题中显示的两个图像情况，解决此问题的一种方法是将背景图像放在伪元素之前和之后，并使用 CSS 动画使用不透明度来淡入和淡出它们，FF 确实将其视为动画。

这里有一个简单的例子作为演示：

.main-page 
  width: 100%;
  height: 100vh;


.main-page::before,
.main-page::after 
  width: 100%;
  height: 100%;
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  animation: animate 15s ease-in-out infinite;
  -webkit-animation: animate 15s ease-in-out infinite;
  -moz-animation: animate 15s ease-in-out infinite;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.5);
  background-size: cover;


.main-page::before 
  background-image: url(https://picsum.photos/id/1015/200/300);


.main-page::after 
  background-image: url(https://picsum.photos/id/1016/200/300);
  animation-delay: 7.5s;


@keyframes animate 
  0% 
    opacity: 1;
  
  50% 
    opacity: 0;
  
  100% 
    opacity: 1;
  

<div class="main-page"></div>