webkit关键帧与firefox的兼容性，即

Question

目前我的图片轮播/滑块未出现在Firefox I.E. 我需要申请哪些css才能兼容Firefox和I.E？适用于Chrome？我尝试添加一些-moz行代码以实现兼容性但不起作用。

<div class="row margin-bot-big hide-mobile">
    <div class="col-1 carousel-box no-padding"> 
        <div class="carousel">
            <img src="images/pslide1.png" class="carousel-img fill-div ">
                <img src="images/pslide2.png" class="carousel-img fill-div ">
                     <img src="images/pslide3.png" class="carousel-img fill-div ">
                        <img src="images/pslide4.png" class="carousel-img fill-div ">
         </div>
     </div>
</div>

.carousel {
overflow: hidden;

}

.carousel .carousel-img {
position:absolute;
opacity: 0;
left: 0;
right: 0;
margin: 0 auto;
-webkit-animation-name: css-animation-fade;
-webkit-animation-duration: 20s;
-webkit-animation-iteration-count: infinite;
}

.carousel .carousel-img:nth-child(2) {
-webkit-animation-delay: 5s;
}

.carousel .carousel-img:nth-child(3) {
  -webkit-animation-delay: 10s;
}

.carousel .carousel-img:nth-child(4) {
  -webkit-animation-delay: 15s;
}


@-webkit-keyframes css-animation-fade {
  from {opacity: 0;}
  5% {opacity: 1;}
  15% {opacity: 1;}
  20% {opacity: 0;}
  to {opacity: 0;}
}