动画线性css背景在Firefox中不起作用[重复]答案

【问题标题】：Animating linear css background not working in firefox [duplicate]动画线性css背景在Firefox中不起作用[重复]
【发布时间】：2016-09-14 12:45:57
【问题描述】：

我知道这个问题已经在某个地方得到了回答，但不知道出了什么问题。我使用 repeating-linear-gradient 作为背景，使用 @-webkit-keyframes 和 @keyframes 对其进行动画处理。它可以在 google chrome 中运行，但在 Firefox 中不可用。

HTML

<div class="menu_block"></div>

CSS

.menu_block {
  height:100px; width:500px;
  background: repeating-linear-gradient(45deg,#000,#000 20px,#fff 20px,#fff 40px);
  background-size:56px 56px; 
  background-position-x:0%;
  -webkit-animation:'slide' 30s infinite linear forwards;
  }
  @-webkit-keyframes 'slide' {
    0%{background-position-x:0%;}
    100% {  background-position-x:100%;}
}
@keyframes 'slide' {
0%{ background-position-x:0%;   }
100% {  background-position-x:100%;}
}

jsfiddle 来了

https://jsfiddle.net/mathews8881/0cj3L6wu/

有人可以帮忙吗。

【问题讨论】：

标签： css css-animations

【解决方案1】：

尝试为两个参数 background-position: 0% 0; 设置动画。还缺少非前缀 animation 规则。

.menu_block {
  height: 100px;
  width: 500px;
  background: repeating-linear-gradient(45deg, #000, #000 20px, #fff 20px, #fff 40px);
  background-size: 56px 56px;
  background-position: 0 0;
  -webkit-animation: slide 30s infinite linear forwards;
  animation: slide 30s infinite linear forwards;
}
@keyframes slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}
@-webkit-keyframes slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0;
  }
}

<div class="menu_block">

</div>

【讨论】：

@Mathew 如果我的回答让您满意，请接受。不要在没有接受答案的情况下留下已解决的问题
我在这个链接中也遇到了同样的问题。你能帮我吗stackoverflow.com/questions/63013326/…

【解决方案2】：

删除animation/keyframes 属性值上的单引号，animation 上的-webkit- 前缀并使用background-position: 0%; 而不是background-position-x:0%;（如评论中所述，background-position-x 不是跨浏览器支持）。

注意，由于您的前缀属性应用不一致，因此我删除了所有这些属性，因此您需要重新添加它们以覆盖需要它们的旧浏览器版本。另外，在您的情况下，使用infinite时无需在动画中使用forwards

.menu_block {
  height:100px; width:500px;
  background: repeating-linear-gradient(45deg,#000,#000 20px,#fff 20px,#fff 40px);
  background-size:56px 56px; 
  background-position:0%;
  animation: slide 30s infinite linear;
}
@keyframes slide {
  0%{	background-position:0%;	}
  100% {	background-position:100%;}
}

<div class="menu_block">		 
</div>

【讨论】：

@justinas 和你的都有效。感谢你们的支持。