CSS 动画过渡不适用于 Firefox答案

【问题标题】：CSS Animation transition does not work on FirefoxCSS 动画过渡不适用于 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 中工作。

标签： html css animation firefox

【解决方案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;
  }
}

&lt;div class="main-page"&gt;&lt;/div&gt;

【讨论】：