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

CSS动画无法在Chrome中使用

1 个答案: