html - CSS 动画在 Chrome 中不起作用

Question

我插入了一些 CSS 动画。它们在 FireFox 中运行良好，但在 Chrome 中运行不佳。有什么办法可以解决这个问题吗？

这是我的代码，我有一张移动缓慢的背景图片。底部有一个移动速度更快的动画。

body {
  background-image: url('images/bg.png');
  animation: animatedSky 40s linear infinite;
}

@keyframes animatedSky {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
}

#bottom { 
   width: 100%; 
   height: 40px; 
   background-image: url('images/bottom.png');
   background-position: 0px 0px;
   background-repeat: repeat-x;
   animation: animatedBackground 8s linear infinite;
   position: absolute;
   margin-top: 600px;
   }

@keyframes animatedBackground {
    from { background-position: 100% 0; }
    to { background-position: 0 0; }
    }

Answer 1

对于 chrome 和 safari 中的关键帧，您需要使用 webkit 前缀:

@-webkit-keyframes