CSS Animation transition在Firefox浏览器背景轮播场景下不生效问题咨询

问题原因 #

1. background-image 不支持标准动画过渡
   CSS 官方规范中，background-image 不属于可动画属性，WebKit 内核浏览器（Chrome、Safari、Edge等）私自扩展支持了该属性的过渡效果，但 Firefox 严格遵循标准规范，仅会在关键帧节点直接切换图片，不会产生平滑过渡效果，这是表现差异的核心原因。
2. CSS 属性书写顺序错误
   你把标准无前缀的animation属性写在了厂商前缀属性之前，正确的写法应该是厂商前缀属性在前，标准属性在后，避免标准属性被后续前缀属性覆盖。另外 Firefox 从 16 版本开始就已经支持标准 animation 属性，-moz-animation 前缀完全可以删除，你在检查器中看到只有 -webkit-animation 处于激活状态，就是属性顺序错误导致标准属性被覆盖了。

修复建议 #

首先调整属性书写顺序：

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

如果要兼容 Firefox 的过渡效果，不要直接动画切换 background-image，推荐用以下方案实现：

• 新增两个重叠的子元素分别存放两张背景图，通过动画切换两个元素的opacity属性实现过渡，opacity是全浏览器兼容的可动画属性。
• 也可以把两张背景图放在同一个容器的不同位置，通过动画修改 background-position 实现滚动切换效果。

内容的提问来源于stack exchange，提问作者Tomáš Vebr