CSS - Firefox不起作用时标题图像平移

Question

我已经在下面的网页上实现了我的标题图像的平移动画，它在Safari和Chrome上工作得很好。我在firefox上运行时遇到了问题，我尝试过使用-moz- and -webkit- properties，但似乎没有什么变化。

http://osealeisure.com/wordpress/osea/about/

CSS

    @keyframes panning {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 100%;
  }
   50% {
    background-position: 100% 0%;
  }
  75% {
    background-position: 0 100%;
  }
  200% {
    background-position: 0 0;
  }
}

@-webkit-keyframes panning {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 100%;
  }
   50% {
    background-position: 100% 0%;
  }
  75% {
    background-position: 0 100%;
  }
  200% {
    background-position: 0 0;
  }
}

@-moz-keyframes panning {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 100%;
  }
   50% {
    background-position: 100% 0%;
  }
  75% {
    background-position: 0 100%;
  }
  200% {
    background-position: 0 0;
  }
}

.vc_custom_1487756740420 {
  position: relative;
  height: 100%;
  width: 100%;
  background-size: 100%!important;
  animation: panning 40s infinite linear;
  -moz-animation: panning 40s infinite linear;
  -webkit-animation: panning 40s infinite linear;
}

任何想法都很感谢！

Answer 1

您必须使用Mozilla动画语法：

-moz-animation: panning 40s infinite linear;