Question

我知道这已经在某个地方得到了解答，但无法弄清楚是什么问题。我使用重复线性渐变为背景和@ -webkit-keyframes和@keyframes为它设置动画。它确实可以在谷歌浏览器中使用，但不适用于Firefox。

HTML

HKEY_LOCAL_MACHINE\Software\Microsoft\BusinessRules\3.0

CSS

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

jsfiddle在这里

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

请有人帮忙。

Answer 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>

Answer 2

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

请注意，由于您的前缀属性并未一致应用，因此我删除了所有属性，因此您需要将它们添加回来以涵盖需要它们的旧浏览器版本。此外，在您的情况下，使用forwards时不需要在动画中使用infinite

＆＃13;

.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%;}
}

＆＃13;

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

＆＃13;

动画线性css背景不在firefox中工作

2 个答案: