Question

我无法弄清楚为什么背景位置的动画不适用于我的Chrome浏览器版本（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; 
}

http://jsfiddle.net/LkeMitchll/kpBby/2/

非常感谢任何帮助！

LM。

Answer 1

您需要在@keyframes前加上特定于浏览器的前缀＆＃34; -webkit＆＃34;同样，请参阅W3Schools

尝试将此添加到您的CSS：

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

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

修正小提琴：http://jsfiddle.net/kpBby/3/

通过不在Webkit上运行的关键帧动画背景位置

1 个答案: