Css 通过关键帧设置背景位置动画在Webkit上不起作用

我不明白为什么背景位置的动画不能在我版本的Chrome Safari（Webkit浏览器）上工作。它在Firefox上运行良好

@keyframes animatedBackground {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 100% 0px; } 
}

.logo {
  width: 600px;
  height: 300px;
  background-image: url("http://placekitten.com/g/200/300");
  background-position: 0px 0px;

  -webkit-animation: animatedBackground 10s linear infinite;
  -moz-animation: animatedBackground 10s linear infinite;
  animation: animatedBackground 10s linear infinite; 
}

非常感谢任何帮助

---

LM.

您还需要在

@keyframes

前面加上浏览器特定的前缀“-webkit”，请参阅

尝试将此添加到CSS中：

@-webkit-keyframes animatedBackground {
  from {
    background-position: 0px 0px; }

  to {
    background-position: 100% 0px; } 
}

固定小提琴：