Html &引用；翻页卡“；CSS动画在IE Edge中不起作用

我用Firefox、Chrome和Safari制作了这个动画。我希望它在IE（IE11和希望10）中工作。这段代码中的一些是IE/MS特定的，目的是为了完成这项工作，而不是IE可能支持的所有代码。这是一次尝试。如果有人能给我指点解决办法，我将不胜感激。即使是与此不同或使用javascript的用户（尽管希望不需要jquery）

/*动画*/
@-o关键帧flipInnerContainer{
0% {
-o变换：旋转（0度）；
变换：旋转（0度）；
}
50% {
-o变换：旋转（180度）；
变换：旋转（180度）；
}
100% {
-o变换：旋转（180度）；
变换：旋转（180度）；
}
}
@-ms关键帧flipInnerContainer{
0% {
-ms变换：透视（1000px）旋转（0度）；
变换：旋转（0度）；
}
50% {
-ms变换：透视（1000px）旋转（180度）；
变换：旋转（180度）；
}
100% {
-ms变换：透视（1000px）旋转（180度）；
变换：旋转（180度）；
}
}
@-moz关键帧flipInnerContainer{
0% {
-moz变换：旋转（0度）；
变换：旋转（0度）；
}
50% {
-莫兹变换：旋转（180度）；
变换：旋转（180度）；
}
100% {
-莫兹变换：旋转（180度）；
变换：旋转（180度）；
}
}
@-webkit关键帧flipInnerContainer{
0% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
50% {
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
100% {
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
}
@关键帧flipInnerContainer{
0% {
变换：透视（1000px）旋转（0度）；
}
50% {
变换：透视（1000px）旋转（180度）；
}
100% {
变换：透视（1000px）旋转（180度）；
}
}
@-o关键帧flipOuterContainer{
0% {
-o变换：旋转（0度）；
变换：旋转（0度）；
}
25% {
-o变换：旋转（180度）；
变换：旋转（180度）；
}
100% {
-o变换：旋转（180度）；
变换：旋转（180度）；
}
}
@-ms关键帧flipOuterContainer{
0% {
-ms变换：透视（1000px）旋转（0度）；
变换：旋转（0度）；
}
25% {
-ms变换：透视（1000px）旋转（180度）；
变换：旋转（180度）；
}
100% {
-ms变换：透视（1000px）旋转（180度）；
变换：旋转（180度）；
}
}
@-moz关键帧flipOuterContainer{
0% {
-moz变换：旋转（0度）；
变换：旋转（0度）；
}
25% {
-莫兹变换：旋转（180度）；
变换：旋转（180度）；
}
100% {
-莫兹变换：旋转（180度）；
变换：旋转（180度）；
}
}
@-webkit关键帧flipOuterContainer{
0% {
-webkit变换：旋转（0度）；
变换：旋转（0度）；
}
25% {
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
100% {
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
}
@关键帧flipOuterContainer{
0% {
变换：透视（1000px）旋转（0度）；
}
25% {
变换：透视（1000px）旋转（180度）；
}
100% {
变换：透视（1000px）旋转（180度）；
}
}
/*Safari没有保持其最终状态，因此这可以修复该问题，并且不会产生负面影响
其他webkit浏览器*/
@-webkit关键帧{
0% {
不透明度：1；
}
1% {
不透明度：0；
}
100% {
不透明度：0；
}
}
@-ms关键帧消除{
0% {
不透明度：1；
}
1% {
不透明度：0；
}
100% {
不透明度：0；
}
}
@-出现ms关键帧{
0% {
不透明度：0；
}
1% {
不透明度：1；
}
100% {
不透明度：1；
}
}
/*全部*/
广告盒{
利润率：20px；
背景：#000000；
位置：相对位置；
z指数：1；
}
#bg出口{
背景色：rgba（255，255，255，0）；
光标：指针；
身高：100%；
左：0px；
位置：绝对位置；
顶部：0px；
宽度：100%；
}
.集装箱{
-moz透视图：1000px；
-webkit透视图：1000px；
透视图：1000px；
}
.1号货柜，
.货柜二，
.货柜三，
.货柜四，
.311，
.三百零二，
.三百零三，
.三百零四，
.七十二万八千一，
.七十二万八千二，
.七十二万八千三，
.七十二万八千四{
位置：绝对位置；
宽度：100%；
身高：100%；
-moz变换样式：preserve-3d；
-webkit变换样式：保留-3d；
-ms变换样式：preserve-3d；
变换样式：保留-3d；
}
.首先{
位置：绝对位置；
宽度：100%；
身高：100%；
-moz背面可见性：隐藏；
-webkit背面可见性：隐藏；
-ms背面能见度：可见；
背面可见性：隐藏；
}
.first.firstonly{
-webkit动画：disapear.5s线性10s1向前；
}
.第一，回来{
位置：绝对位置；
-o变换：旋转（180度）；
-ms变换：透视（1000px）旋转（180度）；
-莫兹变换：旋转（180度）；
-webkit变换：旋转（180度）；
变换：旋转（180度）；
框大小：边框框；
}
.回来{
-ms动画：出现。5s线性3.5s 1向前；
}
.第三{
位置：绝对位置；
宽度：100%；
身高：100%；
排名：0；
左：0；
框大小：边框框；
-moz背面可见性：隐藏；
-webkit背面可见性：隐藏；
-ms背面可见性：隐藏；
背面可见性：隐藏；
-o变换：旋转（180度）；
-ms变换：透视（1000px）旋转（180度）；
-莫兹变换：旋转（180度）；
-webkit变换：旋转（180度）；
变换：旋转（180度）；
}
.瓷砖{
宽度：100%；
身高：100%；
-moz变换样式：preserve-3d；
-webkit变换样式：保留-3d；
-ms变换样式：preserve-3d；
变换样式：保留-3d；
}
.1{
-moz动画：flipInnerContainer 2s线性2s 1向前；
-o型动画：翻转容器2线性2向前；
-webkit动画：flipInnerContainer 2线性2向前；
动画：flipInnerContainer 2s线性2s 1向前；
}
<script type="">

        function flip1(){
          var id='container1';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
          d.className = d.className + myClassName; // adding new class name

        }
        function flip2(){
          var id='container2';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
          d.className = d.className + myClassName; // adding new class name
                 }
        function flip3(){
          var id='container3';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
          d.className = d.className + myClassName; // adding new class name
        }
        function flip4(){
          var id='container4';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,""); // first remove the class name if that already exists
          d.className = d.className + myClassName; // adding new class name
           }

//My Attempt at the 3rd flip, not working

        function finalFlip1(){
        var imgElement = document.getElementById('A1'); //find the image
          imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-3.jpg";
          var id='container1';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,"");
        }
        function finalFlip2(){
         var imgElement = document.getElementById('B1'); //find the image
          imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-3.jpg";

          var id='container2';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,"");
        }
        function finalFlip3(){
                  var imgElement = document.getElementById('C1'); //find the image
          imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-3.jpg";

          var id='container3';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,"");
        }
        function finalFlip4(){
          var imgElement = document.getElementById('D1'); //find the image
          imgElement.src = "http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-3.jpg";

          var id='container4';
          var myClassName=" flip"; //must keep a space before class name
          var d;
          d=document.getElementById(id);
          d.className=d.className.replace(myClassName,"");
        }

         window.setTimeout(flip1,2000);
        window.setTimeout(flip2,4000);
        window.setTimeout(flip3,6000);
        window.setTimeout(flip4,8000);

        window.setTimeout(finalFlip1,11250);        
        window.setTimeout(finalFlip2,11750);
        window.setTimeout(finalFlip3,11000);
        window.setTimeout(finalFlip4,11500);
</script>

<style>

/* entire container, keeps perspective */
.container {
    perspective: 1000;
    transform-style: preserve-3d;
}

/*  UPDATED! flip the pane when this class is added */
.container.flip .back {
  transform: rotateY(0deg);
}

.container.flip .firstonly {
  transform: rotateY(180deg);
}

.container, .firstonly, .back {
    width: 160px;
    height: 150px;
}

/* flip speed goes here */
.container-one,.container-two,.container-three,.container-four {
    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

/* hide back of pane during swap */
.firstonly, .back {
    backface-visibility: hidden;
    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! firstonly pane, placed above back */
.firstonly {
    z-index: 2;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(-180deg);
}

.third{
  display:none;
}
</style>


<section class="onesixty adbox">
    <div id="bg-exit"></div>

    <div class="container" id="container3">
        <div class="container-three">
            <div class="tile three">
                <div class="first firstonly">
                    <img id="C1" src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-1.jpg" height="150px" width="160px" />
                </div>

                <div class="first back">
                    <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-2.jpg" height="150px" width="160px">
                </div>

            </div>
         </div>
    </div>

    <div class="container" id="container1">
        <div class="container-one">
            <div class="tile one">
                <div class="first firstonly">
                    <img id="A1" src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-1.jpg" height="150px" width="160px">
                </div>

                <div class="first back">
                    <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-2.jpg" height="150px" width="160px">
                </div>
            </div>

        </div>
    </div>

    <div class="container" id="container4">
        <div class="container-four">
            <div class="tile four">
                <div class="first firstonly">
                    <img ID ="D1" src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-1.jpg" height="150px" width="160px">
                </div>

                <div class="first back">
                    <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-2.jpg" height="150px" width="160px">
                </div>

            </div>

        </div>
    </div>

    <div class="container" id="container2">
        <div class="container-two">
            <div class="tile two">
                <div class="first firstonly">
                    <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-1.jpg" height="150px" width="160px" ID="B1">
                </div>

                <div class="first back">
                    <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-2.jpg" height="150px" width="160px">
                </div>

            </div>

        </div>
    </div>
</section>