没有Firefox,Css缩放动画无法正常工作

时间:2016-07-14 08:14:20

标签: css css3

我的代码在Firefox上工作,问题在于其他浏览器无法处理动画。我检查这些链接但没有找到任何解决方案。 (我正在使用WordPress) 1。CSS Animation Not working in all browsers 2。CSS Animation not working in Chrome 3。FadeInUp css animation not working 4。CSS flipping animation not working 还有更多

我的代码

@keyframes zoom {
  0%{
    background-size: auto 100%;
  }
  25%{
    background-size: auto 105%;
  }
  50%{
    background-size: auto 110%;
  }
  75%{
    background-size: auto 115%;
  }
  100%{
    background-size: auto 120%;
  }
}

.banner {
  background-image: url("../img/hero.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  -webkit-animation: 15000ms linear 0s alternate none 1 running zoom;
  -moz-animation: 15000ms linear 0s alternate none 1 running zoom;
  -ms-animation: 15000ms linear 0s alternate none 1 running zoom;
  -o-animation: 15000ms linear 0s alternate none 1 running zoom;
  animation: 15000ms linear 0s alternate none 1 running zoom;
  transform-origin: 100% 0 0;

  background-size: auto 100%;
}

我也试试

@keyframes zoom {
    from {
      background-size: auto 100%;

    }
    to {
      background-size: auto 120%;
    }
  }

  .banner {
    background-image: url("../img/hero.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-animation: zoom 12s 1 linear;
       -moz-animation: zoom 12s 1 linear;
        -ms-animation: zoom 12s 1 linear;
         -o-animation: zoom 12s 1 linear;
            animation: zoom 12s 1 linear;
    background-size: auto 100%;
  }

这些代码仅适用于Firefox。

1 个答案:

答案 0 :(得分:0)

也可以使用

managementService