css - Ken Burns 效果在 Microsoft Edge 上出现口吃（Divi 主题，全角滑块）

Question

我在 Microsoft Edge 上的 Ken Burns 效果存在问题，虽然它在 chrome 上完美运行，但它使其结结巴巴，我想知道是否有人可以帮助我调整我的代码，提前非常感谢！网站链接：frama.link/9UQ_8sTd CSS 代码：

.kb-zoomout .et_pb_slide .et_parallax_bg {
   animation: zoomout 7s forwards;
  -ms-animation: zoomout 7s forwards;
  -webkit-animation: zoomout 7s forwards;
  -0-animation: zoomout 7s forwards;
  -moz-animation: zoomout 7s forwards;


}

.kb-zoomin .et_pb_slide .et_parallax_bg {
   animation: zoomin 7s forwards;
  -ms-animation: zoomin 7s forwards;
  -webkit-animation: zoomin 7s forwards;
  -0-animation: zoomin 7s forwards;
  -moz-animation: zoomin 7s forwards;

}

.kb-zoomin-right .et_pb_slide .et_parallax_bg {
   animation: zoomin-right 7s forwards;
  -ms-animation: zoomin-right 7s forwards;
  -webkit-animation: zoomin-right 7s forwards;
  -0-animation: zoomin-right 7s forwards;
  -moz-animation: zoomin-right 7s forwards;

}

.kb-zoomout-right .et_pb_slide .et_parallax_bg {
   animation: zoomout-right 7s forwards;
  -ms-animation: zoomout-right 7s forwards;
  -webkit-animation: zoomout-right 7s forwards;
  -0-animation: zoomout-right 7s forwards;
  -moz-animation: zoomout-right 7s forwards;

}

.kb-zoomout .et_parallax_bg {
   animation: zoomout 17s forwards;
  -ms-animation: zoomout 17s forwards;
  -webkit-animation: zoomout 17s forwards;
  -0-animation: zoomout 17s forwards;
  -moz-animation: zoomout 17s forwards;

}

.kb-zoomin .et_parallax_bg {
   animation: zoomin 17s forwards;
  -ms-animation: zoomin 17s forwards;
  -webkit-animation: zoomin 17s forwards;
  -0-animation: zoomin 17s forwards;
  -moz-animation: zoomin 17s forwards;

}

.kb-zoomin-right .et_parallax_bg {
   animation: zoomin-right 7s forwards;
  -ms-animation: zoomin-right 17s forwards;
  -webkit-animation: zoomin-right 17s forwards;
  -0-animation: zoomin-right 17s forwards;
  -moz-animation: zoomin-right 17s forwards;

}

.kb-zoomout-right .et_parallax_bg {
   animation: zoomout-right 7s forwards;
  -ms-animation: zoomout-right 17s forwards;
  -webkit-animation: zoomout-right 17s forwards;
  -0-animation: zoomout-right 17s forwards;
  -moz-animation: zoomout-right 17s forwards;

}



@keyframes zoomout{
0% {
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;
}


100% {
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomin{
0%{
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;


}


100%{
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-0px, 0px, 0px);
    -webkit-transform: scale3d(3.5, 3.5, 3.5) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomout-right{
0%{
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    animation-timing-function: linear;
}


100%{
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);

}
}

@keyframes zoomin-right{
0%{
    -ms-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    transform: scale3d(1.1, 1.1, 1.1) translate3d(0px, 0px, 0px);
    animation-timing-function: linear;
}


100%{
    -ms-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -webkit-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -o-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    -moz-transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);
    transform: scale3d(1.5, 1.5, 1.5) translate3d(-150px, -20px, 0px);

}
}

该网站要求我发布更多细节和更少的代码，所以我在这里写了一点。

标签： cssanimationslider