Question

我在以下网页上的标题图片上实现了平移动画，这在Safari＆amp;铬。我在使用firefox时遇到问题，我尝试过使用-moz-和-webkit-属性，但似乎没有什么变化。

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;

使用CSS进行标题图像平移 - Firefox无法正常工作

1 个答案: