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

Posted 2023-03-06

【中文标题】通过关键帧动画背景位置在 Webkit 上不起作用

【英文标题】：Animating background-position via keyframes not working on Webkit

【发布时间】：2014-05-21 12:08:00

【问题描述】：

我无法弄清楚为什么背景位置的动画在我的 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; 

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

非常感谢任何帮助！

LM。

【参考方案1】：

您还需要在 @keyframes 前加上浏览器特定的前缀“-webkit”，参见 W3Schools

尝试将其添加到您的 CSS：

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

  to 
    background-position: 100% 0px;  

固定小提琴：http://jsfiddle.net/kpBby/3/