＆＃34; Flip Card＆＃34; CSS动画无法在IE Edge中运行

时间：2015-03-31 06:18:35

标签： css html5 css3 internet-explorer css-animations

我在Firefox，Chrome和Safari中使用此动画。我希望它在IE中工作（IE11，希望是10）。这些代码中的一些是IE / MS特定的，试图使这项工作，而不是所有它可能由IE支持。这是一次尝试。我会很感激任何解决方案。甚至一个与此不同或使用javascript（虽然希望不需要jquery）。

http://jsfiddle.net/raueqe8q/1/ 

/*Animations*/

@-o-keyframes flipInnerContainer {
  0% {
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  50% {
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-ms-keyframes flipInnerContainer {
  0% {
    -ms-transform: perspective(1000px) rotateY(0deg);
    transform: rotateY(0deg);
  }
  50% {
    -ms-transform: perspective(1000px) rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -ms-transform: perspective(1000px) rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-moz-keyframes flipInnerContainer {
  0% {
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  50% {
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-webkit-keyframes flipInnerContainer {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  50% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@keyframes flipInnerContainer {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  50% {
    transform: perspective(1000px) rotateY(180deg);
  }
  100% {
    transform: perspective(1000px) rotateY(180deg);
  }
}
@-o-keyframes flipOuterContainer {
  0% {
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  25% {
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-ms-keyframes flipOuterContainer {
  0% {
    -ms-transform: perspective(1000px) rotateY(0deg);
    transform: rotateY(0deg);
  }
  25% {
    -ms-transform: perspective(1000px) rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -ms-transform: perspective(1000px) rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-moz-keyframes flipOuterContainer {
  0% {
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  25% {
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-webkit-keyframes flipOuterContainer {
  0% {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  25% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@keyframes flipOuterContainer {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  25% {
    transform: perspective(1000px) rotateY(180deg);
  }
  100% {
    transform: perspective(1000px) rotateY(180deg);
  }
}
/* Safari was not keeping its end state so this fixes that and does not adversely effect
        other webkit browsers */

@-webkit-keyframes disapear {
  0% {
    opacity: 1;
  }
  1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes disapear {
  0% {
    opacity: 1;
  }
  1% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes appear {
  0% {
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
/*all*/

.adbox {
  margin: 20px;
  background: #000000;
  position: relative;
  z-index: 1;
}
#bg-exit {
  background-color: rgba(255, 255, 255, 0);
  cursor: pointer;
  height: 100%;
  left: 0px;
  position: absolute;
  top: 0px;
  width: 100%;
}
.container {
  -moz-perspective: 1000px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
.container-one,
.container-two,
.container-three,
.container-four,
.threehundred-one,
.threehundred-two,
.threehundred-three,
.threehundred-four,
.seventwentyeight-one,
.seventwentyeight-two,
.seventwentyeight-three,
.seventwentyeight-four {
  position: absolute;
  width: 100%;
  height: 100%;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.first {
  position: absolute;
  width: 100%;
  height: 100%;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: visible;
  backface-visibility: hidden;
}
.first.firstonly {
  -webkit-animation: disapear .5s linear 10s 1 forwards;
}
.first.back {
  position: absolute;
  -o-transform: rotateY(180deg);
  -ms-transform: perspective(1000px) rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  box-sizing: border-box;
}
.back {
  -ms-animation: appear .5s linear 3.5s 1 forwards;
}
.third {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -o-transform: rotateY(180deg);
  -ms-transform: perspective(1000px) rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
.tile {
  width: 100%;
  height: 100%;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.tile.one {
  -moz-animation: flipInnerContainer 2s linear 2s 1 forwards;
  -o-animation: flipInnerContainer 2s linear 2s 1 forwards;
  -webkit-animation: flipInnerContainer 2s linear 2s 1 forwards;
  animation: flipInnerContainer 2s linear 2s 1 forwards;
}
.tile.two {
  -moz-animation: flipInnerContainer 2s linear 4s 1 forwards;
  -o-animation: flipInnerContainer 2s linear 4s 1 forwards;
  -webkit-animation: flipInnerContainer 2s linear 4s 1 forwards;
  animation: flipInnerContainer 2s linear 4s 1 forwards;
}
.tile.three {
  -moz-animation: flipInnerContainer 2s linear 6s 1 forwards;
  -o-animation: flipInnerContainer 2s linear 6s 1 forwards;
  -webkit-animation: flipInnerContainer 2s linear 6s 1 forwards;
  animation: flipInnerContainer 2s linear 6s 1 forwards;
}
.tile.four {
  -moz-animation: flipInnerContainer 2s linear 8s 1 forwards;
  -o-animation: flipInnerContainer 2s linear 8s 1 forwards;
  -webkit-animation: flipInnerContainer 2s linear 8s 1 forwards;
  animation: flipInnerContainer 2s linear 8s 1 forwards;
}
/*160x600*/

.onesixty {
  width: 160px;
  height: 600px;
}
.onesixty .container {
  width: 160px;
  height: 150px;
}
.container-one {
  -moz-animation: flipOuterContainer 2s linear 11.25s 1 forwards;
  -o-animation: flipOuterContainer 2s linear 11.25s 1 forwards;
  -webkit-animation: flipOuterContainer 2s linear 11.25s 1 forwards;
  animation: flipOuterContainer 2s linear 11.25s 1 forwards;
}
.container-two {
  -moz-animation: flipOuterContainer 2s linear 11.75s 1 forwards;
  -o-animation: flipOuterContainer 2s linear 11.75s 1 forwards;
  -webkit-animation: flipOuterContainer 2s linear 11.75s 1 forwards;
  animation: flipOuterContainer 2s linear 11.75s 1 forwards;
}
.container-three {
  -moz-animation: flipOuterContainer 2s linear 11s 1 forwards;
  -o-animation: flipOuterContainer 2s linear 11s 1 forwards;
  -webkit-animation: flipOuterContainer 2s linear 11s 1 forwards;
  animation: flipOuterContainer 2s linear 11s 1 forwards;
}
.container-four {
  -moz-animation: flipOuterContainer 2s linear 11.5s 1 forwards;
  -o-animation: flipOuterContainer 2s linear 11.5s 1 forwards;
  -webkit-animation: flipOuterContainer 2s linear 11.5s 1 forwards;
  animation: flipOuterContainer 2s linear 11.5s 1 forwards;
}
<section class="onesixty adbox">
  <div id="bg-exit">
  </div>
  <div class="container">
    <div class="container-three">
      <div class="tile three">
        <div class="first firstonly">
          <img 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 class="third">
        <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/A-3.jpg" height="150px" width="160px">
      </div>
    </div>
  </div>
  <div class="container">
    <div class="container-one">
      <div class="tile one">
        <div class="first firstonly">
          <img 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 class="third">
        <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/B-3.jpg" height="150px" width="160px">
      </div>
    </div>
  </div>
  <div class="container">
    <div class="container-four">
      <div class="tile four">
        <div class="first firstonly">
          <img 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 class="third">
        <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/C-3.jpg" height="150px" width="160px">
      </div>
    </div>
  </div>
  <div class="container">
    <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">
        </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 class="third">
        <img src="http://www.highfivefriday.com/sites/www.highfivefriday.com/files/cssAnimationDemo/D-3.jpg" height="150px" width="160px">
      </div>
    </div>
  </div>
</section>

1 个答案:

答案 0 :(得分：0)

这是非常不同的，但我在IE中工作的解决方案。这现在可以在Safari中使用。

原始问题的示例在Safari中有效。

因此，在所有现代浏览器中都有一个解决方案。

http://jsfiddle.net/0tggmkbf/ 

<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>
相关问题
最新问题