Question

我创建了jsfiddle代码，但我无法在Chrome（版本48.0.2564.116）中工作但在IE（版本11.0.9600.17631）中工作。背景图像的动画在IE中运行良好，但Chrome不会显示动画。

提前感谢您的帮助。

代码如下：

#backgroundOnly {
background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%);
background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%); /* IE 10+ */
}

#backgroundAnimation {
    width: 200px; 
    height: 100px;
    background: red;
    position :relative;
    animation: spotLight 5s linear 0s infinite alternate;
    -webkit-animation: spotLight 5s infinite alternate linear 0s  ;
    background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 50%, #CCC49F 100%); Safari /*5.1+, Mobile Safari, Chrome10+ */
}

@keyframes spotLight { /* IE 10+ */
    from {background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 75%, #CCC49F 100%);}
    to   {background-image: -ms-linear-gradient(left, #CCC49F 0%, #ffffff 20%, #CCC49F 100%);}
}

@-webkit-keyframes spotLight { /*Safari 5.1+, Mobile Safari, Chrome10+ */
    from {background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 75%, #CCC49F 100%);}
    to   {background-image: -webkit-linear-gradient(left, #CCC49F 0%, #ffffff 20%, #CCC49F 100%);}
}

<!DOCTYPE html>

<body>
<div id="backgroundOnly">
    <p>background only</p>
    <div id="backgroundAnimation">
        <p>background animation</p>
    </div>
</div>
</body>

Answer 1

https://jsfiddle.net/b4192ynm/1/

您的代码中存在一些拼写错误和错误。

#backgroundOnly {
  background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 50%, #ccc49f 100%);
  background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 50%, #ccc49f 100%);
}

#backgroundAnimation {
  width: 200px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: spotLight 2s linear 0s infinite alternate;
  animation: spotLight 2s linear 0s infinite alternate;
}

@-webkit-keyframes spotLight {
  from {
    background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 75%, #ccc49f 100%);
  }
  to {
    background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 20%, #ccc49f 100%);
  }
}

@keyframes spotLight {
  from {
    background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 75%, #ccc49f 100%);
  }
  to {
    background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 20%, #ccc49f 100%);
  }
}

所以现在至少他们在Chrome中从一侧轻弹到另一侧。如果你的意思是他们没有很好地逐渐改变，那么这个问题就是this question.的重复。正如你可以在那里阅读的那样，此时只有IE支持这一点。

CSS的关键帧动画 - 无法在Chrome中运行

1 个答案: