「翻轉卡」CSS動畫在IE邊緣沒有工作

我有這個動畫在Firefox，Chrome和Safari中工作。我希望它能在IE（IE11和希望10）中工作。這些代碼中的一部分是IE/MS特定的，試圖獲得這項工作，但並不是IE可以支持所有這些代碼。這是一次嘗試。我將不勝感激任何解決方案的指針。即使是一個偏離這個或使用JavaScript（儘管希望不需要jQuery）。「翻轉卡」CSS動畫在IE邊緣沒有工作

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>

來源

2015-03-31 maestrojed

這是非常不同的，但解決我在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>

來源

2015-03-31 18:26:17 maestrojed

「翻轉卡」CSS動畫在IE邊緣沒有工作

回答

相關問題