Question

我的代码在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。

Answer 1

也可以使用

managementService

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

1 个答案: